/* ============================================================================
   QuadraSuite — Design Tokens v2
   Source unique de vérité pour la marque Quadratik et toute la suite logicielle
   ============================================================================

   ARCHITECTURE À 2 COUCHES :
     Couche 1 — PRIMITIVES  : valeurs brutes (couleurs, tailles). NE PAS utiliser
                               directement dans les composants.
     Couche 2 — SÉMANTIQUES : tokens d'intention liés au thème. C'est ce que les
                               composants consomment via var(--token-name).

   POLICES :
     • alcubierre     — titres, logotype (locale, ./fonts/)
     • Nunito Sans    — corps, interface (Google Fonts variable 200–900)

   THÈMES :
     • dark  (défaut) — :root, [data-theme="dark"]
     • light          — [data-theme="light"]

   UTILISATION :
     HTML  → <link rel="stylesheet" href="/tokens.css">
     CSS   → var(--token-name)

   Refonte février 2026 — Réf. STYLE_CRITIQUE.md §1–8
   ============================================================================ */

/* ════════════════════════════════════════════════════════════════════════════
   COUCHE 1 — PRIMITIVES
   Valeurs brutes de référence. Ne JAMAIS utiliser directement dans un composant.
   Consommer uniquement les tokens sémantiques (couche 2).
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── 1.1  Neutral Warm Scale ──────────────────────────────────────────────
     Échelle brun-tabac chaud. Fondation de l'identité sombre Quadratik.
     950 = le plus sombre  ·  0 = blanc pur.
     ──────────────────────────────────────────────────────────────────────── */
  --neutral-950: #1a1715;
  --neutral-900: #2a2420;
  --neutral-850: #332d28;
  --neutral-800: #3d3632;
  --neutral-750: #443d37;
  --neutral-700: #4a4340;
  --neutral-650: #524a45;
  --neutral-600: #5a524b;
  --neutral-500: #706860;
  --neutral-450: #7a6e63;
  --neutral-400: #8a8078;
  --neutral-300: #a89888;
  --neutral-200: #d0c3b4;
  --neutral-150: #eee3d6;
  --neutral-100: #f4efe8;
  --neutral-50: #faf7f4;
  --neutral-0: #ffffff;

  /* ── 1.2  Émeraude Scale (accent primaire) ─────────────────────────────────
     Émeraude saturée — identité principale hi-end de la marque.
     Remplace l'ancien vert olive #9fb07c trop pâle (cf. STYLE_CRITIQUE §9.3–9.4).
     Validé : primary #0a6e52, hover #084538.
     ──────────────────────────────────────────────────────────────────────── */
  --olive-800: #052e22;
  --olive-700: #084538;
  --olive-600: #0a5844;
  --olive-500: #0a6e52;
  --olive-400: #1a8a6e;
  --olive-300: #3aaa8a;
  --olive-200: #70c8aa;
  --olive-100: #c0eadc;

  /* ── 1.3  Ambre Scale (accent secondaire) ──────────────────────────────────
     Ambre chaud — complémentaire de l'émeraude.
     Remplace l'ancien bronze #9d8860 (cf. STYLE_CRITIQUE §9.3–9.4).
     Validé : secondary #b08450, hover/dark #8a663a.
     ──────────────────────────────────────────────────────────────────────── */
  --bronze-800: #4a3018;
  --bronze-700: #6a4828;
  --bronze-600: #8a663a;
  --bronze-500: #b08450;
  --bronze-400: #c89c6a;
  --bronze-300: #dcb888;
  --bronze-200: #ecd4b0;
  --bronze-100: #f8ecd8;

  /* ── 1.4  Couleurs sémantiques — primitives ───────────────────────────────
     4 couleurs fonctionnelles. Distinctes des accents de marque.
     ──────────────────────────────────────────────────────────────────────── */
  --green-600: #5a8a3e;
  --green-500: #7cb882; /* Validé §13 — success hi-end */
  --green-400: #9cd4a4;
  --green-100: #e0f4e4;

  --amber-600: #b8922a;
  --amber-500: #f5c562; /* Validé §13 — warning lumineux */
  --amber-400: #f7d588;
  --amber-100: #fef8e0;

  --red-600: #a8503a;
  --red-500: #d97e7e; /* Validé §13 — danger doux */
  --red-400: #e8a0a0;
  --red-100: #fde8e8;

  --blue-600: #4a7eaa;
  --blue-500: #7cb0dd; /* Validé §13 — info */
  --blue-400: #9cc8ec;
  --blue-100: #e4f0f8;

  /* ── 1.5  Couleurs catégories produits ─────────────────────────────────── */
  --sky-500: #6a9ebe;
  --leaf-500: #8fb86e;
  --clay-500: #d4935a;
  --plum-500: #b88aa0;

  /* ── 1.6  Typographie ─────────────────────────────────────────────────────
     Deux familles : alcubierre (brand) + Nunito Sans (body/UI).
     Cf. STYLE_CRITIQUE §6.7 — remplace Futura Light, Krub, Inter, etc.
     ──────────────────────────────────────────────────────────────────────── */

  /* Familles */
  --font-family-brand: "alcubierre", sans-serif;
  --font-family-body:
    "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue",
    sans-serif;
  --font-family-mono: "Fira Code", "JetBrains Mono", "Cascadia Code", "Consolas", monospace;

  /* Échelle de tailles (fixes — pour la suite logicielle) */
  --font-2xs: 0.625rem; /* 10px */
  --font-xs: 0.75rem; /* 12px */
  --font-sm: 0.875rem; /* 14px */
  --font-base: 1rem; /* 16px */
  --font-lg: 1.125rem; /* 18px */
  --font-xl: 1.25rem; /* 20px */
  --font-2xl: 1.5rem; /* 24px */
  --font-3xl: 1.875rem; /* 30px */
  --font-4xl: 2.25rem; /* 36px */
  --font-5xl: 3rem; /* 48px */

  /* Graisses */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Hauteurs de ligne */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;
  --leading-loose: 1.8;

  /* Espacement des lettres
     Cf. STYLE_CRITIQUE §1.4 — letter-spacing: 0 sur body.
     Valeurs d'espacement uniquement sur titres uppercase. */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  --tracking-brand: 0.15em; /* Titres uppercase brand */

  /* Tailles fluides — SITE WEB UNIQUEMENT (migration future)
     À NE PAS utiliser dans les apps de la suite. */
  --font-fluid-hero: calc(1.5rem + 1.5vw);
  --font-fluid-hero-lg: calc(1.5rem + 2vw);
  --font-fluid-sub: calc(1.2rem + 0.8vw);
  --font-fluid-h1: calc(1rem + 0.8vw);
  --font-fluid-h2: calc(1rem + 0.5vw);
  --font-fluid-body-lg: calc(1rem + 0.3vw);
  --font-fluid-body: calc(1rem + 0.2vw);
  --font-fluid-sm: calc(0.8rem + 0.2vw);
  --font-fluid-xs: calc(0.6rem + 0.4vw);

  /* ── 1.7  Espacement (base 4px) ───────────────────────────────────────── */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;
  --space-5xl: 64px;
  --space-6xl: 80px;

  /* ── 1.8  Border Radius ───────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ── 1.9  Durées & courbes d'accélération ─────────────────────────────── */
  --duration-instant: 75ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  --ease-default: ease;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --transition-fast: var(--duration-fast) var(--ease-default);
  --transition-normal: var(--duration-normal) var(--ease-default);
  --transition-slow: var(--duration-slow) var(--ease-default);

  /* ── 1.10  Z-Index ────────────────────────────────────────────────────── */
  --z-behind: -1;
  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-popover: 50;
  --z-toast: 60;
  --z-tooltip: 70;
  --z-max: 9999;

  /* ── 1.11  Opacité ────────────────────────────────────────────────────── */
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-15: 0.15;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-50: 0.5;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-100: 1;

  /* ── 1.12  Flou (backdrop / glassmorphism) ────────────────────────────── */
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 24px;

  /* ── 1.13  Conteneurs & breakpoints (référence) ───────────────────────── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* ── 1.14  Tailles d'icônes ───────────────────────────────────────────── */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-2xl: 48px;

  /* ── 1.15  Logos — assets (fichiers dans ./logos/) ─────────────────────── */
  --logo-svg: url("./logos/logo.svg");
  --logo-svg-blanc: url("./logos/logo_blanc.svg");
  --logo-svg-rect: url("./logos/logo_rect.svg");
  --logo-svg-marquee: url("./logos/logo_marquee.svg");
  --logo-png: url("./logos/logo.png");
  --logo-png-blanc: url("./logos/logo_blanc.png");
  --logo-png-black: url("./logos/logo_black.png");
  --logo-favicon: url("./logos/favicon.ico");

  --logo-height-xs: 20px;
  --logo-height-sm: 32px;
  --logo-height-md: 48px;
  --logo-height-lg: 64px;
  --logo-height-xl: 96px;
  --logo-height-2xl: 128px;
}

/* ════════════════════════════════════════════════════════════════════════════
   COUCHE 2 — TOKENS SÉMANTIQUES
   Tokens d'intention liés au thème. C'est ce que les composants consomment.
   Changer une primitive met à jour tout le système automatiquement.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Thème DARK (défaut) ─────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  /* ── Fonds ── */
  --bg-base: var(--neutral-850); /* #332d28  Corps page */
  --bg-recessed: var(--neutral-950); /* #1a1715  Derrière le contenu */
  --bg-surface: var(--neutral-800); /* #3d3632  Cartes, inputs */
  --bg-raised: var(--neutral-700); /* #4a4340  Dropdowns, tooltips */
  --bg-overlay: var(--neutral-650); /* #524a45  Modals */

  /* ── Texte ── */
  --text-primary: var(--neutral-200); /* #d0c3b4  Corps principal */
  --text-creme: var(--neutral-150); /* #eee3d6  Titres, emphase crème */
  --text-secondary: var(--neutral-300); /* #a89888  Labels, sous-titres */
  --text-muted: var(--neutral-450); /* #7a6e63  Hints, placeholders */
  --text-disabled: var(--neutral-500); /* #706860  Désactivé */
  --text-inverse: var(--neutral-900); /* #2a2420  Sur fond clair */
  --text-on-accent: var(--neutral-950); /* #1a1715  Sur accent coloré */

  /* ── Crème — couleur identitaire ── */
  --creme: var(--neutral-150); /* #eee3d6  Crème signature Quadratik */
  --creme-light: var(--neutral-100); /* #f4efe8  Crème très pâle */
  --creme-dark: var(--neutral-200); /* #d0c3b4  Crème soutenu (= text) */

  /* ── Accent primaire (émeraude) ── */
  --accent: var(--olive-400); /* #1a8a6e — émeraude clair (lisible sur dark) */
  --accent-hover: var(--olive-500); /* #0a6e52 — émeraude validée */
  --accent-active: var(--olive-600); /* #0a5844 — émeraude saturée */
  --accent-subtle: rgba(26, 138, 110, 0.15);

  /* ── Accent secondaire (ambre) ── */
  --secondary: var(--bronze-500); /* #b08450 — ambre validé */
  --secondary-hover: var(--bronze-600); /* #8a663a — ambre saturé */
  --secondary-active: var(--bronze-700); /* #6a4828 — ambre foncé */
  --secondary-subtle: rgba(176, 132, 80, 0.15);

  /* ── Bordures ── */
  --border-subtle: var(--neutral-700); /* #4a4340 */
  --border-default: var(--neutral-600); /* #5a524b */
  --border-strong: var(--neutral-400); /* #8a8078 */
  --border-accent: var(--olive-500); /* #0a6e52 — émeraude */

  /* ── États sémantiques ── */
  --success: var(--green-500); /* #7cb882 — validé §13 */
  --success-subtle: rgba(124, 184, 130, 0.15);
  --warning: var(--amber-500); /* #f5c562 — validé §13 */
  --warning-subtle: rgba(245, 197, 98, 0.15);
  --error: var(--red-500); /* #d97e7e — validé §13 */
  --error-subtle: rgba(217, 126, 126, 0.15);
  --info: var(--blue-500); /* #7cb0dd — validé §13 */
  --info-subtle: rgba(124, 176, 221, 0.15);

  /* ── Catégories produits ── */
  --cat-indik: var(--sky-500); /* #6a9ebe  Bleu acier */
  --cat-woodik: var(--leaf-500); /* #8fb86e  Vert naturel */
  --cat-organik: var(--clay-500); /* #d4935a  Ocre chaud */
  --cat-stratik: var(--plum-500); /* #b88aa0  Mauve */

  /* ── Ombres ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.45);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.2);

  /* ── Focus ── */
  --focus-ring: 0 0 0 3px rgba(26, 138, 110, 0.4);

  /* ── Scrollbar ── */
  --scrollbar-track: var(--neutral-850);
  --scrollbar-thumb: var(--neutral-600);
  --scrollbar-thumb-hover: var(--neutral-400);
}

/* ── Thème LIGHT ─────────────────────────────────────────────────────────── */

[data-theme="light"] {
  /* ── Fonds ── */
  --bg-base: var(--neutral-50); /* #faf7f4 */
  --bg-recessed: var(--neutral-100); /* #f4efe8 */
  --bg-surface: var(--neutral-0); /* #ffffff */
  --bg-raised: var(--neutral-0); /* #ffffff */
  --bg-overlay: var(--neutral-50); /* #faf7f4 */

  /* ── Texte ── */
  --text-primary: var(--neutral-900); /* #2a2420 */
  --text-creme: var(--neutral-800); /* #3d3632 */
  --text-secondary: var(--neutral-450); /* #7a6e63 */
  --text-muted: var(--neutral-400); /* #8a8078 */
  --text-disabled: var(--neutral-300); /* #a89888 */
  --text-inverse: var(--neutral-100); /* #f4efe8 */
  --text-on-accent: var(--neutral-0); /* #ffffff */

  /* ── Crème (mode clair : inversé) ── */
  --creme: var(--neutral-800);
  --creme-light: var(--neutral-0);
  --creme-dark: var(--neutral-900);

  /* ── Accent primaire (émeraude — valeur saturée pour contraste sur fond clair) ── */
  --accent: var(--olive-600); /* #0a5844 — émeraude saturée, lisible sur crème */
  --accent-hover: var(--olive-700); /* #084538 — émeraude foncée hover */
  --accent-active: var(--olive-800); /* #052e22 — émeraude pressed */
  --accent-subtle: rgba(10, 88, 68, 0.1);

  /* ── Accent secondaire (ambre — tons plus saturés sur fond clair) ── */
  --secondary: var(--bronze-600); /* #8a663a — ambre saturé */
  --secondary-hover: var(--bronze-700); /* #6a4828 — ambre foncé */
  --secondary-active: var(--bronze-800); /* #4a3018 — ambre très foncé */
  --secondary-subtle: rgba(138, 102, 58, 0.1);

  /* ── Bordures ── */
  --border-subtle: var(--neutral-100); /* #f4efe8 */
  --border-default: var(--neutral-300); /* #a89888 */
  --border-strong: var(--neutral-450); /* #7a6e63 */
  --border-accent: var(--olive-600); /* #0a5844 — émeraude */

  /* ── États sémantiques ── */
  --success: var(--green-600); /* #5a8a3e */
  --success-subtle: rgba(90, 138, 62, 0.1);
  --warning: var(--amber-600); /* #b8922a */
  --warning-subtle: rgba(184, 146, 42, 0.1);
  --error: var(--red-600); /* #a8503a */
  --error-subtle: rgba(168, 80, 58, 0.1);
  --info: var(--blue-600); /* #4a7eaa */
  --info-subtle: rgba(74, 126, 170, 0.1);

  /* ── Catégories produits (assombries) ── */
  --cat-indik: #4a7e9a;
  --cat-woodik: #5a8a3a;
  --cat-organik: #b87040;
  --cat-stratik: #8a6080;

  /* ── Ombres ── */
  --shadow-sm: 0 1px 2px rgba(42, 36, 32, 0.06);
  --shadow-md: 0 4px 6px rgba(42, 36, 32, 0.08);
  --shadow-lg: 0 10px 15px rgba(42, 36, 32, 0.1);
  --shadow-xl: 0 20px 25px rgba(42, 36, 32, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(42, 36, 32, 0.06);

  /* ── Focus ── */
  --focus-ring: 0 0 0 3px rgba(10, 88, 68, 0.35);

  /* ── Scrollbar ── */
  --scrollbar-track: var(--neutral-100);
  --scrollbar-thumb: var(--neutral-300);
  --scrollbar-thumb-hover: var(--neutral-400);
}

/* ════════════════════════════════════════════════════════════════════════════
   COMPATIBILITÉ — Aliases des anciens noms de tokens
   Permet aux apps existantes de fonctionner sans modification immédiate.
   Préférer les nouveaux noms dans tout nouveau code.
   ════════════════════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  /* Fonds (anciens noms) */
  --bg-body: var(--bg-base);
  --bg-dark: var(--neutral-850);
  --bg-medium: var(--neutral-750);
  --bg-light: var(--neutral-950);
  --bg-lighter: var(--neutral-600);
  --bg-darkest: var(--bg-base);
  --bg-primary: var(--bg-surface);
  --bg-secondary: var(--neutral-750);
  --surface: var(--bg-surface);
  --surface-raised: var(--bg-raised);
  --surface-overlay: var(--bg-overlay);

  /* Texte (anciens noms) */
  --text-creme-light: var(--neutral-100);
  --text-dimmed: var(--text-muted);
  --primary-text: var(--text-primary);

  /* Accents (anciens noms) */
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --primary-light: var(--accent-subtle);
  --accent-gold: var(--secondary); /* MIGRATION : #c4a265 → #b08450 (ambre validé) */
  --accent-gold-hover: var(--secondary-hover);
  --accent-gold-light: var(--secondary-subtle);

  /* Bordures (anciens noms) */
  --border-light: var(--border-default);
  --border-medium: var(--neutral-500);
  --border-creme: rgba(208, 195, 180, 0.51);
  --border-creme-mid: rgba(208, 195, 180, 0.15);
  --border-creme-light: rgba(208, 195, 180, 0.1);
  --border-creme-solid: var(--neutral-150);
  --border-dark-site: var(--neutral-850);
  --border-color-deeper: var(--neutral-950);
  --border-color-green: var(--olive-500);

  /* Sémantiques (anciens noms) */
  --success-light: var(--success-subtle);
  --success-text: var(--success);
  --warning-light: var(--warning-subtle);
  --warning-text: var(--warning);
  --error-light: var(--error-subtle);
  --error-text: var(--error);
  --info-light: var(--info-subtle);
  --info-text: var(--info);

  /* Espacement (anciens aliases --spacing-*) */
  --spacing-xs: var(--space-xs);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);
  --spacing-xl: var(--space-xl);
  --spacing-2xl: var(--space-2xl);
  --spacing-3xl: var(--space-3xl);
  --spacing-4xl: var(--space-4xl);

  /* Typographie (anciens aliases) */
  --font-size-xs: var(--font-xs);
  --font-size-sm: var(--font-sm);
  --font-size-base: var(--font-base);
  --font-size-md: var(--font-base);
  --font-size-lg: var(--font-lg);
  --font-size-xl: var(--font-xl);
  --font-size-2xl: var(--font-2xl);
  --font-size-3xl: var(--font-3xl);
  --font-md: var(--font-base);
  --font-mono: var(--font-family-mono);

  /* Polices (anciens noms) */
  --font-family-ui: var(--font-family-body);
  --font-family-site: var(--font-family-body);
  --font-family-display: var(--font-family-brand);
  --font-family-blog: var(--font-family-body);

  /* Bordures composées site (anciens noms) */
  --border-site-dark: solid 1px var(--neutral-850);
  --border-site-creme: solid 1px rgba(208, 195, 180, 0.51);
  --border-site-creme-mid: solid 1px rgba(208, 195, 180, 0.15);
  --border-site-creme-light: solid 1px rgba(208, 195, 180, 0.1);
  --border-site-creme-solid: thin solid var(--neutral-150);
  --border-site-green: thin solid var(--olive-500);
  --border-site-deeper: solid 1px var(--neutral-950);

  /* Ombres / focus (anciens noms) */
  --shadow-inset-attrs: var(--shadow-inner);
  --focus-accordion: 0 0 0 0.25rem rgba(26, 138, 110, 0.55);
}

[data-theme="light"] {
  /* Fonds (anciens noms — light) */
  --bg-body: var(--bg-base);
  --bg-dark: var(--neutral-100);
  --bg-medium: var(--neutral-100);
  --bg-light: var(--neutral-300);
  --bg-lighter: var(--neutral-300);
  --bg-darkest: var(--bg-base);
  --bg-primary: var(--bg-surface);
  --bg-secondary: var(--neutral-100);
  --surface: var(--bg-surface);
  --surface-raised: var(--bg-raised);
  --surface-overlay: var(--bg-overlay);

  --text-creme-light: var(--neutral-0);
  --text-dimmed: var(--text-muted);
  --primary-text: var(--text-primary);

  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --primary-light: var(--accent-subtle);
  --accent-gold: var(--secondary);
  --accent-gold-hover: var(--secondary-hover);
  --accent-gold-light: var(--secondary-subtle);

  --border-light: var(--border-default);
  --border-medium: var(--neutral-400);
  --border-creme: var(--neutral-300);
  --border-creme-mid: var(--neutral-100);
  --border-creme-light: var(--neutral-100);
  --border-creme-solid: var(--neutral-400);
  --border-dark-site: var(--neutral-450);
  --border-color-deeper: var(--neutral-600);
  --border-color-green: var(--olive-600);

  --success-light: var(--success-subtle);
  --success-text: var(--success);
  --warning-light: var(--warning-subtle);
  --warning-text: var(--warning);
  --error-light: var(--error-subtle);
  --error-text: var(--error);
  --info-light: var(--info-subtle);
  --info-text: var(--info);

  --spacing-xs: var(--space-xs);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);
  --spacing-xl: var(--space-xl);
  --spacing-2xl: var(--space-2xl);
  --spacing-3xl: var(--space-3xl);
  --spacing-4xl: var(--space-4xl);

  --font-size-xs: var(--font-xs);
  --font-size-sm: var(--font-sm);
  --font-size-base: var(--font-base);
  --font-size-md: var(--font-base);
  --font-size-lg: var(--font-lg);
  --font-size-xl: var(--font-xl);
  --font-size-2xl: var(--font-2xl);
  --font-size-3xl: var(--font-3xl);
  --font-md: var(--font-base);
  --font-mono: var(--font-family-mono);

  --font-family-ui: var(--font-family-body);
  --font-family-site: var(--font-family-body);
  --font-family-display: var(--font-family-brand);
  --font-family-blog: var(--font-family-body);

  --border-site-dark: solid 1px var(--neutral-450);
  --border-site-creme: solid 1px var(--neutral-300);
  --border-site-creme-mid: solid 1px var(--neutral-100);
  --border-site-creme-light: solid 1px var(--neutral-100);
  --border-site-creme-solid: thin solid var(--neutral-400);
  --border-site-green: thin solid var(--olive-600);
  --border-site-deeper: solid 1px var(--neutral-600);

  --shadow-inset-attrs: var(--shadow-inner);
  --focus-accordion: 0 0 0 0.25rem rgba(10, 88, 68, 0.35);
}