/* ============================================================================
   webfield.net : Système de design
   /assets/css/variables.css
   Source unique des tokens. Aucune valeur magique ne doit apparaître ailleurs.
   ============================================================================ */

:root {
  /* ─── PALETTE ─────────────────────────────────────────────────────────── */

  /* Brand */
  --color-brand-primary:        #005763;
  --color-brand-primary-hover:  #003e47;
  --color-brand-primary-soft:   #e6eef0;

  /* Accent */
  --color-accent:               #b26848;
  --color-accent-text:          #8e4f33;
  --color-accent-soft:          #f6e9e4;

  /* Surfaces */
  --color-canvas:               #fafbf9;
  --color-surface:              #ffffff;
  --color-surface-warm:         #f6e9e4;

  /* Texte */
  --color-ink:                  #0e1a1d;
  --color-ink-muted:            #4a5560;
  --color-ink-subtle:           #7a838b;
  --color-ink-on-brand:         #fafbf9;

  /* Bordures */
  --color-border:               #e3e6e8;
  --color-border-strong:        #c5cbcf;

  /* Sémantiques (formulaires, callouts) */
  --color-success:              #1f7a3a;
  --color-warning:              #a35d00;
  --color-danger:               #a3271e;

  /* Focus (RGAA) */
  --color-focus:                #005763;
  --color-focus-inverse:        #ffffff;

  /* ─── TYPOGRAPHIE ─────────────────────────────────────────────────────── */

  --font-family-base:           "Montserrat Variable", system-ui, -apple-system, sans-serif;

  /* Échelle statique (ratio 1.25) */
  --text-xs:                    0.75rem;    /* 12 */
  --text-sm:                    0.875rem;   /* 14 */
  --text-base:                  1rem;       /* 16 */
  --text-lg:                    1.125rem;   /* 18 */
  --text-xl:                    1.25rem;    /* 20 */
  --text-2xl:                   1.5rem;     /* 24 */
  --text-3xl:                   1.875rem;   /* 30 */
  --text-4xl:                   2.25rem;    /* 36 */
  --text-5xl:                   3rem;       /* 48 */
  --text-6xl:                   3.75rem;    /* 60 */

  /* Tokens fluides (clamp built-in pour titres responsive) */
  --text-display:               clamp(2.5rem, 4vw + 1rem, 3.75rem);
  --text-h1:                    clamp(2rem, 3vw + 1rem, 3rem);
  --text-h2:                    clamp(1.5rem, 2vw + 1rem, 2.25rem);
  --text-h3:                    clamp(1.25rem, 1vw + 1rem, 1.5rem);

  /* Graisses */
  --font-light:                 300;
  --font-regular:               400;
  --font-medium:                500;
  --font-semibold:              600;
  --font-bold:                  700;

  /* Hauteurs de ligne */
  --leading-tight:              1.1;
  --leading-snug:               1.3;
  --leading-normal:             1.6;
  --leading-relaxed:            1.75;

  /* Letter-spacing */
  --tracking-tight:             -0.02em;
  --tracking-normal:            0;
  --tracking-wide:              0.05em;

  /* ─── ESPACEMENT (multiplicateur 4) ──────────────────────────────────── */

  --space-1:                    0.25rem;    /* 4 */
  --space-2:                    0.5rem;     /* 8 */
  --space-3:                    0.75rem;    /* 12 */
  --space-4:                    1rem;       /* 16 */
  --space-5:                    1.5rem;     /* 24 */
  --space-6:                    2rem;       /* 32 */
  --space-7:                    3rem;       /* 48 */
  --space-8:                    4rem;       /* 64 */
  --space-9:                    6rem;       /* 96 */
  --space-10:                   8rem;       /* 128 */

  /* ─── RAYONS ─────────────────────────────────────────────────────────── */

  --radius-sm:                  4px;
  --radius-md:                  8px;
  --radius-lg:                  16px;
  --radius-pill:                9999px;

  /* ─── OMBRES (deux couches, sobres) ──────────────────────────────────── */

  --shadow-sm:                  0 1px 2px rgba(14, 26, 29, 0.04),
                                0 1px 3px rgba(14, 26, 29, 0.06);
  --shadow-md:                  0 2px 4px rgba(14, 26, 29, 0.05),
                                0 4px 12px rgba(14, 26, 29, 0.08);
  --shadow-lg:                  0 8px 16px rgba(14, 26, 29, 0.08),
                                0 16px 40px rgba(14, 26, 29, 0.12);

  /* ─── CONTAINERS ─────────────────────────────────────────────────────── */

  --container-narrow:           65ch;       /* ~720px lecture longue */
  --container-default:          1200px;
  --container-wide:             1320px;

  /* ─── TRANSITIONS ────────────────────────────────────────────────────── */

  --transition-fast:            150ms ease-out;
  --transition-base:            250ms ease-out;
  --transition-slow:            400ms ease-out;

  /* ─── Z-INDEX ────────────────────────────────────────────────────────── */

  --z-base:                     0;
  --z-elevated:                 10;
  --z-sticky:                   100;
  --z-overlay:                  1000;
  --z-modal:                    2000;
}

/* Préférence utilisateur : réduction des animations (RGAA + WCAG 2.1 AA) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:          0ms;
    --transition-base:          0ms;
    --transition-slow:          0ms;
  }
}