/* ============================================================================
   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: #332d2a;
  --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 ─────────────────────────────────── 
     Utilisées directement via les tokens sémantiques --cat-*.
     Pas de primitive intermédiaire (simplification v2.1).
     ──────────────────────────────────────────────────────────────────────── */

  /* ── 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.16  CANVAS 3D / CAO — Couleurs pour vues de modélisation ──────────
     Palette chaude et cohérente avec identité Quadratik.
     Remplace anciennes couleurs bleu-gris froides (#0f1e2e, #1a3050, etc.).
     Validé février 2026 — STYLE_CRITIQUE réf. CAD.1–3.
     ──────────────────────────────────────────────────────────────────────── */
  --canvas-floor: #2a2420; /* Sol : neutral-900 (brun chaud) */
  --canvas-floor-alt: #1a1715; /* Sol alt : neutral-950 */
  --canvas-wall: #3d3632; /* Murs : neutral-800 (chaud) */
  --canvas-wall-light: #443d37; /* Murs alt : neutral-750 */
  --canvas-outline: #b08450; /* Contour/arêtes : bronze-500 (ambre) */
  --canvas-outline-hover: #8a663a; /* Contour hover : bronze-600 */
  --canvas-grid-major: #524a45; /* Grille majeure : neutral-650 */
  --canvas-grid-minor: #443d37; /* Grille mineure : neutral-750 */
  --canvas-grid-label: #dcb888; /* Étiquettes grille : bronze-300 */
  --canvas-room-label: #c89c6a; /* Étiquettes pièce : bronze-400 */
  --canvas-axis-x: #d97e7e; /* Axe X : red-500 (danger doux) */
  --canvas-axis-z: #7cb882; /* Axe Z : green-500 (success) */
  --canvas-axis-y: #f5c562; /* Axe Y : amber-500 (warning) */
  --canvas-dim-line: #c89c6a; /* Ligne de cote : bronze-400 */
  --canvas-dim-text: #f8ecd8; /* Texte de cote : bronze-100 (clair) */
  --canvas-origin-mark: #7a6e63; /* Marque d'origine (0,0) : neutral-450 */
  --canvas-highlight: #0a6e52; /* Surlignage/sélection : olive-500 */
  --canvas-highlight-hover: #1a8a6e; /* Surlignage hover : olive-400 */

  /* ── 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); /* #332d2a  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: #6a9ebe; /* Bleu acier — acoustique douce */
  --cat-woodik: #8fb86e; /* Vert naturel — diffusion bois */
  --cat-organik: #d4935a; /* Ocre chaud — absorption */
  --cat-stratik: #b88aa0; /* Mauve — stratégique */

  /* ── Ombres ── */

  /* Overlays */
  --overlay-bg: rgba(0, 0, 0, 0.5);
  --overlay-bg-light: rgba(0, 0, 0, 0.3);
  --overlay-bg-deep: rgba(0, 0, 0, 0.6);

  --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 pour fond clair) ── */
  --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);
}