/* Clodino — design tokens. Two palettes; switch via [data-palette]. */ :root { /* spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; /* type scale (clamp() for responsive) */ --t-eyebrow: 12px; --t-body: 16px; --t-body-lg: 18px; --t-h6: 18px; --t-h5: 22px; --t-h4: 28px; --t-h3: clamp(28px, 3.2vw, 40px); --t-h2: clamp(36px, 4.5vw, 56px); --t-h1: clamp(44px, 6vw, 84px); --radius-1: 4px; --radius-2: 8px; --radius-3: 14px; --max-w: 1240px; --gutter: clamp(20px, 4vw, 56px); --ease: cubic-bezier(.2,.7,.2,1); } /* ─────────────────────────────────────────── PALETTE A — coerente */ :root[data-palette="a"] { --bg: #0B1220; --bg-soft: #0E1626; --bg-light: #F5F7FA; --bg-light-soft: #ECF1F7; --surface: #11192B; --surface-2: #16203A; --on-dark: #E8EEF7; --on-dark-mute: #93A1BE; --on-light: #0B1220; --on-light-mute: #4A5A78; --accent: #00B4D8; /* cyan cloud */ --accent-2: #5B8DEF; /* link blue */ --accent-soft: rgba(0,180,216,.14); --success: #22C55E; --warning: #F59E0B; --border-dark: #1E2A44; --border-light: #E2E8F0; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --letter-display: -0.02em; --letter-tight: -0.015em; --shadow-1: 0 1px 2px rgba(11,18,32,.06), 0 4px 16px rgba(11,18,32,.06); --shadow-2: 0 12px 40px rgba(0, 30, 60, .14); --grid-dot: rgba(91, 141, 239, .12); --hero-gradient: radial-gradient(1200px 600px at 78% -10%, rgba(0,180,216,.18), transparent 60%), radial-gradient(900px 500px at 0% 100%, rgba(91,141,239,.16), transparent 60%); --tag-bg: rgba(0,180,216,.10); --tag-fg: #67E0F5; --tag-bg-light: rgba(0,180,216,.10); --tag-fg-light: #007893; } /* ─────────────────────────────────────────── PALETTE B — opensource warm */ :root[data-palette="b"] { --bg: #0E0E11; --bg-soft: #131318; --bg-light: #FAF7F2; --bg-light-soft: #F2EDE3; --surface: #181820; --surface-2: #1F1F29; --on-dark: #F2EDE6; --on-dark-mute: #A8A095; --on-light: #1A1A1A; --on-light-mute: #5C544A; --accent: #F25C05; /* tux orange */ --accent-2: #0E9F6E; /* terminal green */ --accent-soft: rgba(242,92,5,.14); --success: #0E9F6E; --warning: #FFD166; --border-dark: #26262E; --border-light: #E7E2D9; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-display: 'Space Grotesk', 'Inter', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --letter-display: -0.025em; --letter-tight: -0.01em; --shadow-1: 0 1px 2px rgba(20,15,5,.06), 0 4px 16px rgba(20,15,5,.06); --shadow-2: 0 12px 40px rgba(40, 20, 0, .12); --grid-dot: rgba(242, 92, 5, .12); --hero-gradient: radial-gradient(1100px 540px at 80% -10%, rgba(242,92,5,.20), transparent 60%), radial-gradient(900px 500px at -5% 100%, rgba(14,159,110,.14), transparent 60%); --tag-bg: rgba(242,92,5,.12); --tag-fg: #FFB58A; --tag-bg-light: rgba(242,92,5,.10); --tag-fg-light: #B83E00; } /* ─────────────────────────────────────────── PER-AREA THEMES Override only the accent + tag colors. Palette A/B keeps controlling background, type, surface, border. Apply via [data-theme] on a card, section, or . */ [data-theme="infra"] { --accent:#3B82F6; --accent-soft:rgba(59,130,246,.14); --tag-bg:rgba(59,130,246,.14); --tag-fg:#93C5FD; --tag-bg-light:rgba(59,130,246,.10); --tag-fg-light:#1E40AF; } [data-theme="k8s"] { --accent:#7C3AED; --accent-soft:rgba(124,58,237,.16); --tag-bg:rgba(124,58,237,.18); --tag-fg:#C4B5FD; --tag-bg-light:rgba(124,58,237,.10); --tag-fg-light:#5B21B6; } [data-theme="obs"] { --accent:#EAB308; --accent-soft:rgba(234,179,8,.16); --tag-bg:rgba(234,179,8,.16); --tag-fg:#FDE68A; --tag-bg-light:rgba(234,179,8,.10); --tag-fg-light:#92400E; } [data-theme="devops"] { --accent:#FC6D26; --accent-soft:rgba(252,109,38,.16); --tag-bg:rgba(252,109,38,.16); --tag-fg:#FDBA8C; --tag-bg-light:rgba(252,109,38,.10); --tag-fg-light:#C2410C; } [data-theme="ai"] { --accent:#EC4899; --accent-soft:rgba(236,72,153,.16); --tag-bg:rgba(236,72,153,.16); --tag-fg:#F9A8D4; --tag-bg-light:rgba(236,72,153,.10); --tag-fg-light:#BE185D; } [data-theme="cloud"] { --accent:#06B6D4; --accent-soft:rgba(6,182,212,.16); --tag-bg:rgba(6,182,212,.16); --tag-fg:#67E0F5; --tag-bg-light:rgba(6,182,212,.10); --tag-fg-light:#0E7490; } [data-theme="web"] { --accent:#059669; --accent-soft:rgba(5,150,105,.16); --tag-bg:rgba(5,150,105,.16); --tag-fg:#6EE7B7; --tag-bg-light:rgba(5,150,105,.10); --tag-fg-light:#047857; } [data-theme="train"] { --accent:#C2823A; --accent-soft:rgba(194,130,58,.16); --tag-bg:rgba(194,130,58,.16); --tag-fg:#E8C08A; --tag-bg-light:rgba(194,130,58,.10); --tag-fg-light:#7C4A10; } /* per-area hero glow */ [data-theme] .svc-hero, .svc-hero[data-theme] { background: radial-gradient(1100px 540px at 80% -10%, var(--accent-soft), transparent 60%), radial-gradient(900px 480px at -5% 100%, var(--accent-soft), transparent 60%); } /* hide draft EN content until lang switch */ [data-en] { /* default IT, no special styling */ }