/* =========================================================================
   ASTERION — Design tokens
   Source: DESIGN-SYSTEM_Asterion fond blanc optima.docx (v1.0 — Mai 2026)
   ========================================================================= */

/* Optima — primary brand face. Optima is a licensed face (Linotype) and is
   NOT freely distributable. We do NOT bundle it here. The fallback stack
   reaches for system Optima first, then humanist sans-serifs (Candara on
   Windows, Optima Nova on macOS), and finally Google Fonts "Cormorant Sans
   Display" which is the closest open-source humanist approximation we ship.
   See README.md → Typography for the substitution note. */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ------------------------------------------------------------------- */
  /* COULEURS PRINCIPALES                                                */
  /* ------------------------------------------------------------------- */
  --color-bleu-spatial:   #111729;   /* fond principal sombre */
  --color-blanc:          #FFFFFF;   /* texte sur fond sombre, surfaces */
  --color-rouge-fonce:    #C03030;   /* accent secondaire, institutionnel */
  --color-rouge-claquant: #FF0000;   /* CTA primary, données critiques */
  --color-bleu:           #2A63A3;   /* surfaces secondaires, liens */

  /* Neutres */
  --color-gray-900: #0B0F1C;   /* fond secondaire (plus sombre que spatial) */
  --color-gray-700: #1F2638;   /* surfaces, cartes */
  --color-gray-500: #6B7280;   /* texte secondaire */
  --color-gray-300: #A1A8B5;   /* texte désactivé, bordures */
  --color-gray-100: #E5E7EB;   /* séparateurs */

  /* Sémantique — monochromatique ASTERION (pas de vert/orange) */
  --color-success: #2A63A3;
  --color-warning: #C03030;
  --color-error:   #FF0000;
  --color-info:    #2A63A3;

  /* Alpha helpers (used in tooling, e.g. nav backdrop) */
  --color-bleu-spatial-92: rgba(17, 23, 41, 0.92);
  --color-bleu-30:         rgba(42, 99, 163, 0.30);
  --color-bleu-10:         rgba(42, 99, 163, 0.10);
  --color-blanc-08:        rgba(255, 255, 255, 0.08);

  /* Semantic surface tokens (light & dark)                              */
  --bg:           var(--color-bleu-spatial);
  --bg-elevated: var(--color-gray-700);
  --bg-subtle:    var(--color-gray-900);
  --fg:           var(--color-blanc);
  --fg-muted:     var(--color-gray-300);
  --fg-faint:     var(--color-gray-500);
  --border:       var(--color-blanc-08);
  --accent:       var(--color-rouge-claquant);
  --accent-soft:  var(--color-rouge-fonce);
  --link:         var(--color-bleu);

  /* ------------------------------------------------------------------- */
  /* TYPOGRAPHIE                                                         */
  /* ------------------------------------------------------------------- */
  --font-display: 'Optima', 'Optima Nova', 'Candara', 'Cormorant Garamond',
                   'Segoe UI', sans-serif;
  --font-body:    'Optima', 'Optima Nova', 'Candara', 'Cormorant Garamond',
                   'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', 'Courier New', monospace;

  /* Type scale — token / size / line-height / weight                   */
  --fs-display-xl: 96px;  --lh-display-xl: 1.05; --fw-display-xl: 700;
  --fs-display-l:  72px;  --lh-display-l:  1.10; --fw-display-l:  700;
  --fs-h1:         56px;  --lh-h1:         1.15; --fw-h1:         700;
  --fs-h2:         40px;  --lh-h2:         1.20; --fw-h2:         700;
  --fs-h3:         32px;  --lh-h3:         1.25; --fw-h3:         600;
  --fs-h4:         24px;  --lh-h4:         1.30; --fw-h4:         600;
  --fs-h5:         20px;  --lh-h5:         1.35; --fw-h5:         600;
  --fs-body-l:     18px;  --lh-body-l:     1.55; --fw-body-l:     400;
  --fs-body-m:     16px;  --lh-body-m:     1.50; --fw-body-m:     400;
  --fs-body-s:     14px;  --lh-body-s:     1.45; --fw-body-s:     400;
  --fs-caption:    12px;  --lh-caption:    1.40; --fw-caption:    500;
  --fs-overline:   11px;  --lh-overline:   1.30; --fw-overline:   600;
  --fs-button:     13px;  --lh-button:     1.00; --fw-button:     600;

  --tracking-overline: 0.15em;
  --tracking-button:   0.12em;

  /* ------------------------------------------------------------------- */
  /* ESPACEMENTS — système 8pt                                            */
  /* ------------------------------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px;  --space-8: 64px;  --space-9: 96px;
  --space-10: 128px;

  /* ------------------------------------------------------------------- */
  /* MOTION                                                              */
  /* ------------------------------------------------------------------- */
  --motion-fast:   150ms ease-out;
  --motion-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-medium: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ------------------------------------------------------------------- */
  /* LAYOUT & FORM                                                       */
  /* ------------------------------------------------------------------- */
  --container-max: 1280px;
  --radius: 0;             /* tout est carré, flat, militaire */
  --border-w: 1px;
  --stroke-icon: 1.5px;    /* Lucide-style line icons */

  /* No shadow system — style flat. These exist for one-off overlays.   */
  --shadow-overlay: 0 24px 64px rgba(0, 0, 0, 0.45);
  --shadow-focus:   0 0 0 2px var(--color-rouge-claquant);
}

/* =========================================================================
   SEMANTIC HELPER CLASSES
   ========================================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  -webkit-font-smoothing: antialiased;
}

.display-xl { font: var(--fw-display-xl) var(--fs-display-xl)/var(--lh-display-xl) var(--font-display); }
.display-l  { font: var(--fw-display-l)  var(--fs-display-l)/var(--lh-display-l)   var(--font-display); }
.h1         { font: var(--fw-h1)         var(--fs-h1)/var(--lh-h1)                 var(--font-display); }
.h2         { font: var(--fw-h2)         var(--fs-h2)/var(--lh-h2)                 var(--font-display); }
.h3         { font: var(--fw-h3)         var(--fs-h3)/var(--lh-h3)                 var(--font-display); }
.h4         { font: var(--fw-h4)         var(--fs-h4)/var(--lh-h4)                 var(--font-display); }
.h5         { font: var(--fw-h5)         var(--fs-h5)/var(--lh-h5)                 var(--font-display); }
.body-l     { font: var(--fw-body-l)     var(--fs-body-l)/var(--lh-body-l)         var(--font-body); }
.body-m     { font: var(--fw-body-m)     var(--fs-body-m)/var(--lh-body-m)         var(--font-body); }
.body-s     { font: var(--fw-body-s)     var(--fs-body-s)/var(--lh-body-s)         var(--font-body); }
.caption    { font: var(--fw-caption)    var(--fs-caption)/var(--lh-caption)       var(--font-body); }
.overline   {
  font: var(--fw-overline) var(--fs-overline)/var(--lh-overline) var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
}
.btn-label  {
  font: var(--fw-button) var(--fs-button)/var(--lh-button) var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--tracking-button);
}
.mono       { font-family: var(--font-mono); }