/* =========================================================
   Sens Idées — Colors & Type Foundations
   Base : Design System OnPerf, rebrandé Sens Idées.
   Seul écart vs OnPerf : l'accent. On remplace le "Perf Lime"
   (#D6FF3D, fortement codé OnPerf) par un accent Sens Idées
   plus chaud — "Sens Amber" (#E3A33A) — calibré pour vivre
   sur fond noir + off-white sans concurrencer l'encre.
   Les noms de tokens restent identiques pour compatibilité
   avec les templates : seules les valeurs de l'accent changent.
   ========================================================= */

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============== COLOR TOKENS ============== */

  /* —— Core neutrals (la colonne vertébrale reste monochrome) —— */
  --ink-1000: #0A0A0B;   /* near-black, encre primaire + noir de marque */
  --ink-900:  #141416;
  --ink-800:  #1F1F22;
  --ink-700:  #2E2E33;
  --ink-500:  #6B6B73;   /* texte secondaire */
  --ink-400:  #8E8E97;   /* texte tertiaire */
  --ink-300:  #C7C7CC;   /* filets sur fond sombre */
  --ink-200:  #E4E4E7;   /* dividers sur fond clair */
  --ink-150:  #EFEFF1;   /* surface raised */
  --ink-100:  #F5F5F4;   /* surface */
  --ink-50:   #FAFAF9;   /* page bg */
  --paper:    #FFFFFF;

  /* —— Accent de signature Sens Idées : "Sens Amber" ——
     Chaud, premium, lisible. Usage parcimonieux : highlights KPI,
     fonds de CTA, marqueur, séries de graphes. Jamais en fond de page. */
  --perf-lime:   #E45B0E;   /* accent principal */
  --perf-lime-2: #C44D0A;   /* CTA / pressed / bordures */
  --perf-lime-3: #A8430A;   /* encre sur clair (AA) */
  --perf-lime-tint: #FCE7DA;

  /* —— Accents secondaires —— */
  --accent-ink:   #0A0A0B;       /* série 1 par défaut */
  --accent-stone: #C7BFA8;       /* neutre chaud, papier */
  --accent-clay:  #C5553D;       /* warning / decline */
  --accent-azure: #1F4FE0;       /* lien / info, parcimonieux */
  --accent-mist:  #DDE4ED;       /* tint froid */

  /* —— Semantic —— */
  --bg:           var(--ink-50);
  --bg-elevated:  var(--paper);
  --bg-inverse:   var(--ink-1000);
  --bg-tint:      var(--ink-100);

  --fg:           var(--ink-1000);
  --fg-muted:     var(--ink-500);
  --fg-subtle:    var(--ink-400);
  --fg-inverse:   var(--paper);

  --border:       var(--ink-200);
  --border-strong: var(--ink-300);
  --border-inverse: var(--ink-700);

  --link:         var(--ink-1000);
  --link-hover:   var(--perf-lime-3);

  --success:      #2F8F4E;
  --warning:      #C5553D;
  --danger:       #B8362A;
  --info:         var(--accent-azure);

  --score-good:    #2F8F4E;
  --score-mid:     #D6A23D;
  --score-low:     #C5553D;

  /* ============== TYPE TOKENS ============== */

  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Inter', 'Instrument Serif', ui-sans-serif, system-ui, sans-serif;
  --font-serif:   'Instrument Serif', 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display-xl: clamp(56px, 7.5vw, 128px);
  --fs-display-l:  clamp(44px, 5vw, 88px);
  --fs-display-m:  clamp(36px, 4vw, 64px);
  --fs-h1:         clamp(32px, 3.2vw, 48px);
  --fs-h2:         clamp(24px, 2.4vw, 34px);
  --fs-h3:         20px;
  --fs-h4:         16px;
  --fs-body-l:     18px;
  --fs-body:       15px;
  --fs-body-s:     13px;
  --fs-caption:    11px;
  --fs-eyebrow:    11px;

  --lh-display:    0.95;
  --lh-tight:      1.1;
  --lh-snug:       1.25;
  --lh-normal:     1.5;
  --lh-relaxed:    1.65;

  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.14em;

  /* ============== SPACING / RADIUS / SHADOW ============== */

  --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;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 0 rgba(10,10,11,.04);
  --shadow-sm: 0 1px 2px rgba(10,10,11,.06), 0 1px 1px rgba(10,10,11,.04);
  --shadow-md: 0 4px 12px rgba(10,10,11,.06), 0 1px 2px rgba(10,10,11,.04);
  --shadow-lg: 0 12px 32px rgba(10,10,11,.08), 0 2px 6px rgba(10,10,11,.04);
  --shadow-xl: 0 28px 64px rgba(10,10,11,.10), 0 4px 12px rgba(10,10,11,.04);
  --shadow-inset: inset 0 0 0 1px rgba(10,10,11,.06);

  --ease-out:  cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 400ms;
}

/* =========================================================
   SEMANTIC TYPE
   ========================================================= */

.op-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.op-display-xl, .op-display-l, .op-display-m {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tightest);
  line-height: var(--lh-display);
  color: var(--fg);
}
.op-display-xl { font-size: var(--fs-display-xl); }
.op-display-l  { font-size: var(--fs-display-l); }
.op-display-m  { font-size: var(--fs-display-m); }

.op-h1, .op-h2, .op-h3, .op-h4 {
  font-family: var(--font-sans);
  color: var(--fg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}
.op-h1 { font-size: var(--fs-h1); font-weight: 700; }
.op-h2 { font-size: var(--fs-h2); }
.op-h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-normal); }
.op-h4 { font-size: var(--fs-h4); letter-spacing: var(--tracking-normal); }

.op-body-l { font-family: var(--font-sans); font-size: var(--fs-body-l); line-height: var(--lh-relaxed); color: var(--fg); }
.op-body   { font-family: var(--font-sans); font-size: var(--fs-body);   line-height: var(--lh-normal);   color: var(--fg); }
.op-body-s { font-family: var(--font-sans); font-size: var(--fs-body-s); line-height: var(--lh-normal);   color: var(--fg-muted); }
.op-caption{ font-family: var(--font-sans); font-size: var(--fs-caption);line-height: var(--lh-normal);   color: var(--fg-subtle); letter-spacing: var(--tracking-wide); }

.op-serif  { font-family: var(--font-serif); font-weight: 400; font-style: italic; }
.op-mono   { font-family: var(--font-mono); }

.op-tnum { font-variant-numeric: tabular-nums; }

.op-marker {
  background-image: linear-gradient(180deg, transparent 55%, var(--perf-lime) 55%);
  padding: 0 .08em;
}