/* ═══════════════════════════════════════════════════════════════
   LINAW · TOKENS
   Version 1.0 · 3 août 2026
   Source unique. Ne pas redéfinir ces valeurs ailleurs.
   Référence : DESIGN-SYSTEM.md
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── RAMPE VERTE · teinte OKLCH 150 ─────────────────────── */
  --green-50:  #e4f8e7;
  --green-100: #c9f1d0;
  --green-200: #9ce6ab;
  --green-300: #63d782;
  --green-400: #1ac960;
  --green-500: #00b252;   /* accent de marque */
  --green-600: #009342;
  --green-700: #007131;
  --green-800: #005121;
  --green-900: #003312;
  --green-950: #021c09;

  /* ─── RAMPE NEUTRE · teinte OKLCH 260 ────────────────────── */
  --neutral-0:   #ffffff;
  --neutral-50:  #f3f5f8;
  --neutral-100: #e9ebef;
  --neutral-200: #d5d8db;
  --neutral-300: #bbbec2;
  --neutral-400: #9b9fa3;
  --neutral-500: #83868c;
  --neutral-600: #66696e;
  --neutral-700: #45484c;
  --neutral-800: #27292c;
  --neutral-900: #101214;
  --neutral-950: #08090b;

  /* ─── SÉMANTIQUES ────────────────────────────────────────── */
  --red-400:   #f66d67;
  --red-700:   #a21921;
  --red-950:   #2c0807;
  --amber-400: #f5ae39;
  --amber-800: #7b5100;
  --amber-950: #281600;

  /* ─── COULEUR TIERCE · usage strictement limité ───────────── */
  --whatsapp: #25d366;

  /* ─── TYPOGRAPHIE ────────────────────────────────────────── */
  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-display:  clamp(3rem, 8vw, 6rem);
  --text-h1:       clamp(2.25rem, 5vw, 3.5rem);
  --text-h2:       clamp(1.75rem, 3.5vw, 2.5rem);
  --text-h3:       1.375rem;
  --text-h4:       1.125rem;
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-body-sm:  0.875rem;
  --text-caption:  0.8125rem;
  --text-label:    0.75rem;
  --text-price:    clamp(2rem, 4vw, 2.75rem);

  --leading-display: 0.95;
  --leading-tight:   1.15;
  --leading-snug:    1.4;
  --leading-body:    1.7;

  --tracking-display: -0.04em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-label:   0.14em;

  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     800;

  /* ─── ESPACEMENT · base 4 px ─────────────────────────────── */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;
  --space-4:  16px;  --space-5:  20px;  --space-6:  24px;
  --space-8:  32px;  --space-10: 40px;  --space-12: 48px;
  --space-16: 64px;  --space-20: 80px;  --space-24: 96px;
  --space-28: 112px;

  /* ─── CONTENEURS ─────────────────────────────────────────── */
  --container:        1160px;
  --container-narrow: 740px;
  --container-wide:   1400px;

  /* ─── FORMES ─────────────────────────────────────────────── */
  --radius-sm:   3px;
  --radius-md:   8px;
  --radius-full: 9999px;

  /* ─── MOUVEMENT ──────────────────────────────────────────── */
  --duration-fast:   120ms;
  --duration-base:   220ms;
  --duration-slow:   400ms;
  --duration-reveal: 600ms;

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ═══ THÈME SOMBRE · principal ═════════════════════════════════ */
:root,
[data-theme='dark'] {
  --canvas:         var(--neutral-950);
  --surface:        var(--neutral-900);
  --surface-raised: var(--neutral-800);

  --border-subtle:  var(--neutral-800);
  --border:         var(--neutral-700);
  --border-control: var(--neutral-500);

  --text-primary:   var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-tertiary:  var(--neutral-500);

  --accent:         var(--green-500);
  --accent-hover:   var(--green-400);
  --accent-ink:     var(--neutral-950);
  --accent-quiet:   var(--green-300);
  --accent-surface: var(--green-950);

  --danger:          var(--red-400);
  --danger-surface:  var(--red-950);
  --warning:         var(--amber-400);
  --warning-surface: var(--amber-950);

  --shadow-raised:   0 2px 8px rgb(0 0 0 / 0.24);
  --shadow-floating: 0 8px 32px rgb(0 0 0 / 0.40);
  --shadow-overlay:  0 24px 64px rgb(0 0 0 / 0.56);
}

/* ═══ THÈME CLAIR · onboarding, documents, impression ══════════ */
[data-theme='light'] {
  --canvas:         var(--neutral-50);
  --surface:        var(--neutral-0);
  --surface-raised: var(--neutral-0);

  --border-subtle:  var(--neutral-200);
  --border:         var(--neutral-300);
  --border-control: var(--neutral-500);

  --text-primary:   var(--neutral-950);
  --text-secondary: var(--neutral-700);
  --text-tertiary:  var(--neutral-600);

  --accent:         var(--green-700);
  --accent-hover:   var(--green-800);
  --accent-ink:     var(--neutral-0);
  --accent-quiet:   var(--green-600);
  --accent-surface: var(--green-50);

  --danger:          var(--red-700);
  --danger-surface:  var(--red-400);
  --warning:         var(--amber-800);
  --warning-surface: var(--amber-400);

  --shadow-raised:   0 2px 8px rgb(0 0 0 / 0.12);
  --shadow-floating: 0 8px 32px rgb(0 0 0 / 0.20);
  --shadow-overlay:  0 24px 64px rgb(0 0 0 / 0.28);
}

/* ═══ SOCLE ════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--canvas);
  color: var(--text-secondary);
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}