/* ========================================================================== ACiD Studio — Design Tokens v3.0 VARIABLES ONLY. No selectors with declarations beyond :root + theme. Source of truth: figma-plugin/tokens.json in Acid-Studio repo ========================================================================== */ /* ========================================================================== LOCAL @FONT-FACE — brand fonts uploaded to /fonts ========================================================================== */ /* Inter — 100..900 (latin + latin-ext) */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100; src: url('fonts/inter-latin-100-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 100; src: url('fonts/inter-latin-ext-100-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 200; src: url('fonts/inter-latin-200-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 200; src: url('fonts/inter-latin-ext-200-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 300; src: url('fonts/inter-latin-300-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 300; src: url('fonts/inter-latin-ext-300-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('fonts/inter-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('fonts/inter-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('fonts/inter-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('fonts/inter-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('fonts/inter-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('fonts/inter-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 800; src: url('fonts/inter-latin-800-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 800; src: url('fonts/inter-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 900; src: url('fonts/inter-latin-900-normal.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 900; src: url('fonts/inter-latin-ext-900-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } /* Outfit — 100..900 (latin + latin-ext) */ @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 100; src: url('fonts/outfit-latin-100-normal.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 100; src: url('fonts/outfit-latin-ext-100-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 200; src: url('fonts/outfit-latin-200-normal.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 200; src: url('fonts/outfit-latin-ext-200-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 300; src: url('fonts/outfit-latin-300-normal.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 300; src: url('fonts/outfit-latin-ext-300-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 400; src: url('fonts/outfit-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 400; src: url('fonts/outfit-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 500; src: url('fonts/outfit-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 500; src: url('fonts/outfit-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 600; src: url('fonts/outfit-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 600; src: url('fonts/outfit-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 700; src: url('fonts/outfit-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 700; src: url('fonts/outfit-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 800; src: url('fonts/outfit-latin-800-normal.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 800; src: url('fonts/outfit-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 900; src: url('fonts/outfit-latin-900-normal.woff2') format('woff2'); } @font-face { font-family: 'Outfit'; font-style: normal; font-display: swap; font-weight: 900; src: url('fonts/outfit-latin-ext-900-normal.woff2') format('woff2'); unicode-range: U+0100-02AF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; } /* JetBrains Mono — 100..800 */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 100; src: url('fonts/jetbrains-mono-latin-100-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 200; src: url('fonts/jetbrains-mono-latin-200-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 300; src: url('fonts/jetbrains-mono-latin-300-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 400; src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 600; src: url('fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 700; src: url('fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 800; src: url('fonts/jetbrains-mono-latin-800-normal.woff2') format('woff2'); } /* Zeyada — script, 400 only */ @font-face { font-family: 'Zeyada'; font-style: normal; font-display: swap; font-weight: 400; src: url('fonts/zeyada-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Zeyada'; font-style: normal; font-display: swap; font-weight: 400; src: url('fonts/zeyada-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; } :root { /* ---------- BRAND COLORS (raw, never override) ---------- */ --acid: #c8f135; /* primary accent — "acid green" */ --acid-text: #1a2000; /* WCAG AA text on --acid */ --ink: #111111; /* primary fg / dark surfaces */ --black: #000000; --white: #ffffff; --surface: #fafafa; /* page surface, card bg */ --surface-2: #f5f5f0; /* editorial / blog surface */ --link: #111111; --link-hover: #1a2000; /* Semantic – Danger (oxide red — muted, not neon) */ --red-50: #fdf1ee; --red-200: #f4c9bb; --red-500: #c7482a; --red-700: #7a2612; --danger: var(--red-500); --success: #4a7c3e; /* @deprecated — kept as internal aliases; do not use in new work */ --blue: var(--link); --prose: #4b5563; --acid-gray: #767676; /* Glass */ --glass: rgba(255,255,255,0.28); --glass-solid: rgba(255,255,255,0.78); --glass-border: rgba(0,0,0,0.11); /* ---------- NEUTRALS (role-based, not scale-based) ---------- Rule: pick by ROLE, not by number. There are only three muted grays in ACiD — if you need a fourth, you're wrong. */ --fg-muted: #6b7280; /* secondary text, metadata, placeholders */ --border: #ececec; /* default hairline (cards, inputs, dividers) */ --border-strong: #d9d9d9; /* emphasized hairline (selected, focus ring base) */ /* Surfaces (intentionally distinct from neutrals — they're backgrounds) */ --surface-raised: #f5f5f5; /* raised panel / code block / secondary button */ /* @deprecated — numeric gray scale. Use role tokens above. Kept so legacy files don't break; will be removed in v3.5. */ --gray-100: var(--surface-raised); --gray-200: #e5e5e5; --gray-300: var(--border-strong); --gray-400: var(--fg-muted); --gray-500: var(--fg-muted); --gray-600: var(--prose); /* Semantic – Success */ --green-50: #f0fdf4; --green-200: #bbf7c7; --green-500: #22c55e; --green-700: #15803d; /* Code */ --code-text: #178d00; --code-bg-light: #f1f5f9; --code-bg-dark: #1e293b; /* ---------- SEMANTIC FG/BG ---------- */ --fg-1: var(--ink); --fg-2: var(--prose); --fg-3: var(--acid-gray); --fg-inverse: var(--white); --bg-1: var(--white); --bg-2: var(--surface); --bg-3: var(--gray-100); --bg-dark: var(--ink); /* ---------- TYPOGRAPHY ---------- */ --font-heading: 'Outfit', 'Inter', system-ui, sans-serif; --font-display: 'Outfit', 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-script: 'Zeyada', cursive; /* Sizes */ --fs-display: 52px; --fs-h1: 44px; --fs-h2: 30px; --fs-h3: 20px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12px; --fs-micro: 10px; /* Line heights */ --lh-display: 1.0; --lh-h1: 1.05; --lh-h2: 1.2; --lh-h3: 1.3; --lh-body: 1.5; --lh-prose: 1.65; /* Letter spacing */ --ls-display: -0.02em; --ls-h1: -0.02em; --ls-h2: -0.02em; --ls-tight: -0.03em; --ls-eyebrow: 0.14em; --ls-uppercase: 0.18em; /* ---------- SPACING ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; /* Legacy main.css aliases */ --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 32px; --spacing-xl: 44px; /* ---------- RADII ---------- */ --r-tag: 4px; --r-btn: 8px; --r-panel: 10px; --r-card: 12px; --r-table: 16px; --r-modal: 20px; --r-pill: 9999px; /* ---------- SHADOWS ---------- */ --sh-subtle: 0 2px 8px rgba(0,0,0,0.06); --sh-card: 0 8px 24px rgba(0,0,0,0.10); --sh-elevated: 0 20px 60px rgba(0,0,0,0.15); --sh-glass: 0 1px 3px rgba(0,0,0,0.07), 0 2px 10px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.9); /* ---------- Z-INDEX ---------- */ --z-navbar: 50; --z-modal: 100; --z-toast: 200; --z-tooltip: 300; /* ---------- MOTION ---------- */ --duration-instant: 80ms; --duration-fast: 160ms; --duration-base: 240ms; --duration-slow: 420ms; --duration-epic: 720ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-base: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard); --transition-hover: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); --transition-spring: transform var(--duration-base) var(--ease-spring); /* @deprecated — legacy easing names */ --ease-out-expo: var(--ease-out); --ease-snap-back: var(--ease-spring); --ease-smooth: var(--ease-standard); --ease-bounce-pop: var(--ease-spring); color-scheme: light; /* DS-TOKENS:START — généré par sync-tokens.js, ne pas éditer */ --acid: #b8975a; --acid-text: #ffffff; --ink: #1a1a1a; --white: #ffffff; --surface: #faf6f0; --font-heading: 'Playfair Display', 'Inter', system-ui, sans-serif; --font-body: 'Cormorant Garamond', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* DS-TOKENS:END */ } /* ========================================================================== DARK THEME — override semantic tokens only. Never redefine raw brand values. ========================================================================== */ [data-theme="dark"] { color-scheme: dark; /* Foreground */ --fg-1: #f4f4f0; --fg-2: #a8a89e; --fg-3: #6b6b63; --fg-inverse: var(--ink); --fg-muted: #8a8a80; --prose: var(--fg-2); /* Backgrounds */ --bg-1: #0c0c0a; --bg-2: #141412; --bg-3: #1c1c1a; --bg-dark: #000000; --surface: var(--bg-1); --surface-2: var(--bg-2); --surface-raised: var(--bg-3); --white: var(--fg-1); /* Borders */ --border: rgba(244,244,240,.08); --border-strong: rgba(244,244,240,.16); /* Glass */ --glass: rgba(20,20,18,0.55); --glass-solid: rgba(28,28,26,0.82); --glass-border: rgba(244,244,240,0.10); /* Code */ --code-text: #c8f135; --code-bg-light: #1c1c1a; --code-bg-dark: #0c0c0a; /* Links */ --link: #c8f135; --link-hover: #e2ff6b; /* Semantic – danger (dark) */ --red-50: rgba(199,72,42,.10); --red-200: rgba(199,72,42,.28); --red-500: #e86a4a; --red-700: #f4c9bb; /* Green adjusted for dark bg */ --green-50: rgba(34,197,94,.10); --green-200: rgba(34,197,94,.28); --green-500: #4ade80; --green-700: #bbf7c7; /* Shadows — replaced with hairline + glow on dark */ --sh-subtle: 0 0 0 1px rgba(244,244,240,.05); --sh-card: 0 0 0 1px rgba(244,244,240,.08), 0 20px 40px -12px rgba(0,0,0,.6); --sh-elevated: 0 0 0 1px rgba(244,244,240,.12), 0 40px 80px -20px rgba(0,0,0,.8); --sh-glass: inset 0 1px 0 rgba(244,244,240,.06), 0 8px 32px rgba(0,0,0,.4); }