/* ============================================================================
   TOOL DESIGN KIT — tokens.css
   Richtung C · GROTESK. Single Source of Truth für alle Tools (receipts, edgelab, …).
   3-Schicht-Architektur:  Primitive → Semantic → Component.
   Komponenten referenzieren NUR Semantic-/Component-Tokens, nie Rohwerte.
   Hell/Dunkel = ein Semantic-Mapping-Tausch ([data-theme]).
   Pro-Tool-Akzent = ein Variablen-Override ([data-tool]).
   Schriften: fonts.css (self-hosted). Regeln: /root/STANDARDS.md.
   ============================================================================ */

/* ---------- LAYER 1 · PRIMITIVE (Rohwerte) -------------------------------- */
:root{
  /* Schriftfamilien (Dateien: fonts.css) */
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-sans:'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Tool-Akzent-Rohwerte (WCAG-kalibriert, s. _contrast.cjs). Pro Tool 5 Rollen:
     base = Grafik/Linien (≥3:1) · strong = Text/Button auf Hell (≥4,5:1) · lt = Akzent auf Dunkel
     · soft = aktiver Hintergrund hell · soft-d = aktiver Hintergrund dunkel */
  --t-receipts:#B57E2E; --t-receipts-strong:#8A5A1B; --t-receipts-lt:#DBA850; --t-receipts-soft:#F6EBD7; --t-receipts-soft-d:#241B0E;
  --t-edgelab:#258A86;  --t-edgelab-strong:#1A736B;  --t-edgelab-lt:#46B3AD;  --t-edgelab-soft:#DEF0EE;  --t-edgelab-soft-d:#0F2422;
  --t-argus:#A6463C;    --t-argus-strong:#9A3E34;    --t-argus-lt:#CE6B5F;    --t-argus-soft:#F4E2DF;    --t-argus-soft-d:#271512;
  --t-neutral:#3A4047;  --t-neutral-strong:#3A4047;  --t-neutral-lt:#8A929A;  --t-neutral-soft:#ECEEF0;  --t-neutral-soft-d:#1A1D21;

  /* Radius */
  --radius:10px; --radius-sm:8px; --radius-pill:999px;

  /* Type-Scale */
  --text-xs:.6875rem; --text-sm:.8125rem; --text-base:.875rem; --text-md:.9375rem;
  --text-lg:1.0625rem; --text-xl:1.25rem; --text-2xl:1.5625rem; --text-3xl:2rem;

  /* Motion */
  --dur-fast:140ms; --dur:200ms; --dur-slow:300ms;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in:cubic-bezier(.4,0,1,1);
}

/* ---------- LAYER 2 · SEMANTIC (Bedeutung; hier sitzt der Theme-Switch) ---- */
:root,[data-theme="light"]{
  --bg:#F5F6F7; --surface:#FFFFFF; --sunken:#EEF0F1;
  --border:#E5E8EA; --border-strong:#D4D8DB;
  --text:#14171A; --muted:#666F77; --subtle:#969EA5;

  --accent:var(--tool-accent);              /* Grafik/Linien/Icons (≥3:1) */
  --accent-strong:var(--tool-accent-strong);/* Text & Button-Flächen (≥4,5:1) */
  --accent-soft:var(--tool-accent-soft);    /* aktiver/weicher Hintergrund */
  --on-accent:#FFFFFF;                      /* Text/Icon auf --accent-strong-Fläche */

  --ok:#2F8254; --ok-bg:#E6F1EA;
  --warn:#8C6A1C; --warn-bg:#F6EFD8;
  --bad:#A6463C; --bad-bg:#F5E4E1;
  --neutral:#5B636B; --neutral-bg:#EDEFF1;

  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --shadow:0 1px 2px rgba(20,23,26,.04), 0 8px 20px -12px rgba(20,23,26,.14);
  --shadow-sm:0 1px 2px rgba(20,23,26,.05);
  --shadow-pop:0 10px 30px -8px rgba(20,23,26,.22), 0 2px 6px rgba(20,23,26,.08);
}
[data-theme="dark"]{
  --bg:#0B0D0F; --surface:#15181B; --sunken:#101316;
  --border:#23282D; --border-strong:#333A40;
  --text:#ECEFF1; --muted:#969EA6; --subtle:#646C73;

  --accent:var(--tool-accent-lt);           /* Grafik auf Dunkel */
  --accent-strong:var(--tool-accent-lt);    /* Text/Button: helle Fläche, dunkler Text (--on-accent) */
  --accent-soft:var(--tool-accent-soft-d);
  --on-accent:#0B0D0F;

  --ok:#56A277; --ok-bg:#15241B;
  --warn:#C19A47; --warn-bg:#251F10;
  --bad:#C76A5E; --bad-bg:#281613;
  --neutral:#9AA1A8; --neutral-bg:#1C2024;

  --ring:0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow-pop:0 14px 34px -10px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.5);
}

/* ---------- TOOL-AKZENT-AUFLÖSUNG --------------------------------------- */
/* Fallback ZUERST (= neutral/Schiefer), gilt nur ohne data-tool. Schiefer ist auch bewusst
   wählbar via data-tool="neutral" — schön ruhig, aber nicht der Default für alle. */
:root{--tool-accent:#3A4047;--tool-accent-strong:#3A4047;--tool-accent-lt:#8A929A;--tool-accent-soft:#ECEEF0;--tool-accent-soft-d:#1A1D21}
/* [data-tool] überschreibt die Variablen. `:root`-Prefix → höhere Spezifität (0,2,0) als der
   :root-Fallback (0,1,0) → gewinnt IMMER, unabhängig von der Quellreihenfolge. */
:root[data-tool="receipts"]{--tool-accent:var(--t-receipts);--tool-accent-strong:var(--t-receipts-strong);--tool-accent-lt:var(--t-receipts-lt);--tool-accent-soft:var(--t-receipts-soft);--tool-accent-soft-d:var(--t-receipts-soft-d)}
:root[data-tool="edgelab"] {--tool-accent:var(--t-edgelab); --tool-accent-strong:var(--t-edgelab-strong); --tool-accent-lt:var(--t-edgelab-lt); --tool-accent-soft:var(--t-edgelab-soft); --tool-accent-soft-d:var(--t-edgelab-soft-d)}
:root[data-tool="argus"]   {--tool-accent:var(--t-argus);   --tool-accent-strong:var(--t-argus-strong);   --tool-accent-lt:var(--t-argus-lt);   --tool-accent-soft:var(--t-argus-soft);   --tool-accent-soft-d:var(--t-argus-soft-d)}
:root[data-tool="neutral"] {--tool-accent:var(--t-neutral); --tool-accent-strong:var(--t-neutral-strong); --tool-accent-lt:var(--t-neutral-lt); --tool-accent-soft:var(--t-neutral-soft); --tool-accent-soft-d:var(--t-neutral-soft-d)}