/* =========================================================================
   Spektalis — Foundations
   Tokens couleurs, typographie & sémantique pour tous les artefacts du brand.
   ========================================================================= */

/* Pile typographique 100% grotesque / helvetica-style — ton technique B2B sobre. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- COULEURS — INK (control-room, surfaces sombres) ---------- */
  --ink-950: #060912;
  --ink-900: #0B1220;   /* surface brand primaire, fond sombre */
  --ink-800: #131C2E;
  --ink-700: #1F2A40;
  --ink-600: #2E3A52;
  --ink-500: #475066;
  --ink-400: #6A7388;
  --ink-300: #9099A8;
  --ink-200: #C2C7D0;
  --ink-100: #E2E4E9;
  --ink-050: #F0F1F4;

  /* ---------- COULEURS — PAPER (surfaces claires, chaleur éditoriale FR) ---------- */
  --paper:    #F5F2EB;   /* fond app principal clair */
  --paper-2:  #ECE7DC;   /* fond secondaire / sections alternées */
  --bone:     #FAF8F3;   /* card / surface élevée sur paper */
  --white:    #FFFFFF;

  /* ---------- SIGNAL — ambre primaire de marque (référence VU-mètre) ---------- */
  --signal-50:  #FDF6E8;
  --signal-100: #FBE7C2;
  --signal-200: #F7D08A;
  --signal-300: #F2B25A;
  --signal-400: #ECA13F;
  --signal-500: #E89B2C;   /* brand primary */
  --signal-600: #C97E14;
  --signal-700: #9C610F;
  --signal-800: #6E440B;

  /* ---------- ACCENTS PRODUITS ---------- */
  --sentinel-500:  #2EAE7B;   /* vert opérationnel — Sentinel */
  --sentinel-100:  #D6F0E2;
  --sentinel-700:  #1F7A55;

  --vigie-500:     #D14A3D;   /* rouge alerte — Vigie */
  --vigie-100:     #F7DDD8;
  --vigie-700:     #973128;

  --synop-500:     #3D7BD9;   /* bleu plan — Synop */
  --synop-100:     #DAE5F8;
  --synop-700:     #265699;

  --atlas-500:     #6B5BD6;   /* violet data — Atlas */
  --atlas-100:     #E1DCF7;
  --atlas-700:     #4A3DA0;

  --portfolio-500: #B8743E;   /* ocre catalogue — Portfolio */
  --portfolio-100: #EFDFCA;
  --portfolio-700: #80501F;

  --praxis-500:    #D97706;   /* ambre action — Praxis (équipes / intervenants) */
  --praxis-100:    #FBE6C7;
  --praxis-700:    #9A5404;

  /* ---------- SÉMANTIQUE ---------- */
  --success:  var(--sentinel-500);
  --success-bg: var(--sentinel-100);
  --warning:  var(--signal-500);
  --warning-bg: var(--signal-100);
  --danger:   var(--vigie-500);
  --danger-bg: var(--vigie-100);
  --info:     var(--synop-500);
  --info-bg:  var(--synop-100);

  /* ---------- ALIAS DE SURFACE (clair par défaut) ---------- */
  --bg:       var(--paper);
  --bg-alt:   var(--paper-2);
  --surface:  var(--bone);
  --surface-elev: var(--white);

  --fg:       var(--ink-900);
  --fg-2:     var(--ink-700);
  --fg-3:     var(--ink-500);
  --fg-mute:  var(--ink-400);
  --fg-soft:  var(--ink-300);
  --fg-on-dark: var(--paper);

  --border:       rgba(11, 18, 32, 0.10);
  --border-2:     rgba(11, 18, 32, 0.18);
  --border-strong:rgba(11, 18, 32, 0.30);
  --border-on-dark: rgba(245, 242, 235, 0.12);

  --accent:       var(--signal-500);
  --accent-hover: var(--signal-600);
  --accent-fg:    var(--ink-900);   /* texte sur ambre — on garde sombre */

  /* ---------- TYPOGRAPHIE — familles ---------- */
  /* Display = même famille grotesque que l'UI mais en weight 600–700 et tracking serré.
     Helvetica Neue est privilégié si installé localement ; sinon Inter Tight prend le relais
     (mêmes proportions Swiss/neo-grotesque, gratuit, web-safe). */
  --font-display: 'Helvetica Neue', 'Helvetica', 'Inter Tight', Arial, sans-serif;
  --font-sans:    'Inter Tight', 'Helvetica Neue', 'Helvetica', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- TYPOGRAPHIE — échelle ---------- */
  --fs-xs:   12px;
  --fs-sm:   13px;
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;
  --fs-4xl:  44px;
  --fs-5xl:  60px;
  --fs-6xl:  84px;
  --fs-7xl:  120px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.02em;
  --tracking-eyebrow:0.12em;

  /* ---------- ESPACEMENT ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- RAYONS ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 16px;
  --r-2xl:24px;
  --r-pill: 999px;

  /* ---------- ÉLÉVATION (low-flat, pas de drop-shadow flou) ---------- */
  --shadow-1: 0 1px 0 rgba(11,18,32,0.04), 0 1px 2px rgba(11,18,32,0.06);
  --shadow-2: 0 1px 0 rgba(11,18,32,0.04), 0 2px 6px rgba(11,18,32,0.08), 0 8px 24px -8px rgba(11,18,32,0.10);
  --shadow-3: 0 1px 0 rgba(11,18,32,0.04), 0 8px 24px -4px rgba(11,18,32,0.12), 0 24px 48px -16px rgba(11,18,32,0.14);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(11,18,32,0.06);
  --ring-focus: 0 0 0 3px rgba(232,155,44,0.30);

  /* ---------- TIMINGS ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;

  /* ---------- LAYOUT ---------- */
  --container-max: 1240px;
  --container-pad: 32px;
}

/* =========================================================================
   Mode sombre — surface ink, texte paper. Utiliser .on-dark sur sections.
   ========================================================================= */
.on-dark {
  --bg:       var(--ink-900);
  --bg-alt:   var(--ink-800);
  --surface:  var(--ink-800);
  --surface-elev: var(--ink-700);

  --fg:       var(--paper);
  --fg-2:     var(--ink-100);
  --fg-3:     var(--ink-200);
  --fg-mute:  var(--ink-300);
  --fg-soft:  var(--ink-400);
  --fg-on-dark: var(--paper);

  --border:       rgba(245, 242, 235, 0.10);
  --border-2:     rgba(245, 242, 235, 0.18);
  --border-strong:rgba(245, 242, 235, 0.32);

  --shadow-1: 0 1px 0 rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 1px 0 rgba(0,0,0,0.30), 0 2px 6px rgba(0,0,0,0.50), 0 8px 24px -8px rgba(0,0,0,0.60);
  --shadow-3: 0 1px 0 rgba(0,0,0,0.30), 0 8px 24px -4px rgba(0,0,0,0.55), 0 24px 48px -16px rgba(0,0,0,0.70);

  background: var(--bg);
  color: var(--fg);
}

/* =========================================================================
   Sémantique — base elements
   ========================================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* — Display (hero, citations, marketing) — grotesque heavy, tracking serré — */
.display, h1.display, h2.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
}

/* — Hiérarchie produit (UI, sections, cartes) — */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-5xl);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}
p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
}
.lead {
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  font-weight: 400;
}
.small, small {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
}
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-mono);
  color: var(--fg-2);
}
.ref {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--fg-mute);
  text-transform: uppercase;
}
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-8) 0;
}
::selection { background: var(--signal-200); color: var(--ink-900); }