/* ============================================================
   Thomas Bosshart — Color tokens
   v4 « Technical » (décision Direction C, 2026-07-04) :
   pure-white page, cool gray-blue neutrals, ONE emerald accent
   used everywhere (study + console + documents — no voice fork).
   Light-only — dark mode dropped (décision 2026-07-04, see "DARK:
   REPORTÉ" below). Signature: code blocks stay dark regardless (terminal,
   not a theme).

   Accent discipline: emerald = brand actions (primary buttons,
   links, active nav, marks, doc rules) AND the positive family
   (payé, accepté) — they never clash because statuses are always
   pale tints with text, never solid fills next to a button.
   Danger = red (danger only). Warning = the C orange. Info = slate.
   ============================================================ */

:root {
  /* Light-only — dark mode is deferred (décision 2026-07-04) */
  color-scheme: light;

  /* ---- Cool neutral scale (gray-blue, hue ~215, low chroma) ---- */
  --n-0:   #ffffff;
  --n-50:  #ffffff; /* page — pure white */
  --n-100: #f5f7f9; /* wells, inset panels */
  --n-150: #f0f2f5; /* hover wash */
  --n-200: #e9ecef; /* hairline / soft border */
  --n-300: #e0e4e8; /* border */
  --n-400: #9aa3af; /* faint text, disabled */
  --n-500: #6e7683; /* muted-strong */
  --n-600: #4b5563; /* secondary text */
  --n-700: #353d49;
  --n-800: #1c222b;
  --n-900: #0f1115; /* strongest text */

  /* ---- Emerald accent (Direction C) ---- */
  --em-100: #effbf6;
  --em-200: #cdeee0;
  --em-300: #93dcc2;
  --em-400: #43b894;
  --em-500: #0d9373; /* accent base — fills, marks */
  --em-600: #0b7a60; /* accent text/links on white (AA) */
  --em-700: #096450;
  --em-800: #074e3f;

  /* ---- Supporting hues (cooled to sit on the gray-blue) ---- */
  --olive-500:  var(--em-500); /* positive fill — shares the emerald */
  --olive-600:  var(--em-600); /* positive text (AA) */
  --olive-100:  var(--em-100);
  --red-100:    #fdeeee;
  --red-200:    #f8d4d4;
  --red-500:    #de3b41; /* danger fill */
  --red-600:    #c22f34; /* danger text (AA) */
  --red-700:    #a02428;
  --red-800:    #7d1c1f;
  --amber-500:  #b45f16; /* warning text (orange family, C accent-2) */
  --amber-400:  #f0883e; /* warning fill / viz orange */
  --amber-100:  #fdf1e5;
  --slate-500:  #3a6b99; /* info-blue */
  --slate-100:  #ebf1f7;

  /* Legacy aliases (déprécié — consumers should use semantics) */
  --ochre-100: var(--em-100); --ochre-200: var(--em-200);
  --ochre-300: var(--em-300); --ochre-400: var(--em-400);
  --ochre-500: var(--em-500); --ochre-600: var(--em-600);
  --ochre-700: var(--em-700); --ochre-800: var(--em-800);
  --clay-100:  var(--red-100); --clay-500: var(--red-500); --clay-600: var(--red-600);

  /* ===================== SEMANTIC ALIASES ===================== */
  /* Surfaces */
  --color-bg:            var(--n-50);   /* page */
  --color-surface:       var(--n-0);    /* cards, nav, dialogs */
  --color-surface-sunken:var(--n-100);  /* wells, inset panels */
  --color-surface-hover: var(--n-150);

  /* Text */
  --text-strong:  var(--n-900);
  --text-body:    var(--n-800);
  --text-muted:   var(--n-600);
  --text-faint:   var(--n-400);
  --text-on-accent: #ffffff;

  /* Lines */
  --border:       var(--n-300);
  --border-soft:  var(--n-200);
  --border-strong:var(--n-400);

  /* Accent */
  --accent:        var(--em-500);
  --accent-text:   var(--em-600);
  --accent-hover:  var(--em-600);
  --accent-soft:   var(--em-100);
  --accent-border: var(--em-200);
  --focus-ring:    color-mix(in srgb, var(--em-500) 38%, transparent);

  /* Links */
  --link:        var(--em-600);
  --link-hover:  var(--em-700);

  /* Status (semantic backgrounds + foregrounds).
     positive shares the emerald family with the accent — allowed
     because statuses render as pale tints + text, never solid
     fills, so a green chip never reads as a green button. */
  --positive:     var(--em-600);
  --positive-soft:var(--em-100);
  --danger:       var(--red-600);
  --danger-soft:  var(--red-100);
  --warning:      var(--amber-500);
  --warning-soft: var(--amber-100);
  --info:         var(--slate-500);
  --info-soft:    var(--slate-100);

  /* ---- Code surfaces: ALWAYS DARK (terminal), both themes ---- */
  --code-bg:      #0f1419;
  --code-surface: #161c23;  /* head bar */
  --code-border:  #1d242c;
  --code-fg:      #d5dce4;  /* default code text */
  --code-muted:   #8a94a0;  /* filename, chrome labels */
  --code-faint:   #5c6773;  /* line numbers, lang tag */
  --code-accent:  #4fd6a8;  /* hover / active chrome on dark */
  --code-hover:   rgba(255,255,255,.07);
  --code-line:    rgba(255,255,255,.05); /* current line */
  /* inline code sits in running text → follows the page theme */
  --code-inline-bg: #eef1f4;
  --code-inline-fg: var(--em-600);

  /* Syntax tokens — one set, tuned for the dark code surface */
  --syn-kw:   #5ea8ff; /* keywords — blue */
  --syn-fn:   #4fd6a8; /* functions — emerald */
  --syn-str:  #e6b450; /* strings — gold */
  --syn-num:  #f0883e; /* numbers — orange */
  --syn-com:  #5c6773; /* comments — cool gray */
  --syn-pun:  #8a94a0;
  --syn-var:  var(--code-fg);

  /* Selection */
  --selection-bg: var(--em-200);
  --selection-fg: var(--n-900);

  /* Scrim — the ONE sanctioned overlay backdrop (drawers, modals). */
  --scrim: color-mix(in srgb, var(--n-900) 42%, transparent);

  /* ============ Diagram / figure palette (design-owned) ============
     Use these in SVG figures — never raw hex. They all reference the core
     palette, so they flip with the theme automatically. LOCAL: kept on the
     legacy ochre, olive, clay and amber alias names rather than upstream's
     direct emerald and red refs (upstream now points --fig-series-1 etc.
     straight at the em-500 base) — the ochre-named indirection still
     resolves to emerald via the legacy aliases above ("safe by
     construction"), and the pre-existing var-resolution test
     (scripts/design-tokens-reconcile.test.mjs) asserts these exact
     ochre/olive/accent-soft strings, so this section is a deliberate
     NON-adopt of upstream's --fig-* block. */
  --fig-bg:        transparent;               /* figure canvas (frame shows through) */
  --fig-surface:   var(--color-surface);      /* a panel inside a figure */
  --fig-surface-2: var(--color-surface-sunken);
  --fig-ink:       var(--n-800);              /* primary strokes + labels */
  --fig-muted:     var(--n-500);              /* secondary labels */
  --fig-axis:      var(--n-400);              /* axes */
  --fig-grid:      var(--n-200);              /* gridlines */
  --fig-edge:      var(--n-400);              /* graph edges / connectors */
  --fig-node:      var(--n-100);              /* node / box fill */
  --fig-node-ink:  var(--n-700);              /* node border + label */

  /* Categorical series — the single cool tone (slate) is the only blue
     the system sanctions; --fig-series-1 (ochre→emerald) is the accent. */
  --fig-series-1:  var(--ochre-500);          /* primary / accent series */
  --fig-series-2:  var(--slate-500);          /* the one allowed cool tone */
  --fig-series-3:  var(--olive-600);          /* positive-leaning */
  --fig-series-4:  var(--clay-500);           /* brick */
  --fig-series-5:  var(--amber-500);          /* amber */

  /* Semantic figure roles */
  --fig-good:      var(--olive-600);
  --fig-bad:       var(--clay-600);
  --fig-accent:    var(--accent);
  --fig-highlight: var(--accent-soft);        /* shaded region behind a curve */
}

/* ========================= DARK: REPORTÉ ========================= */
/* Décision 2026-07-04 : pas de mode sombre pour l'instant — le site
   est light-only. Les blocs de code restent sombres par design (ce
   n'est pas un thème). Une face sombre (C dark : page #0b0e12,
   émeraude vive #2dd4a7) reste esquissée dans
   explorations/Accent sombre.html si elle revient un jour. */