/* w/e gymbr — Token-Set
   Die EINZIGE Stelle, an der ein Hex-Wert, eine Schriftgroesse oder ein Mass steht.
   Herkunft: ci-digest-v2.5, Abschnitte 4 (Farbe), 5 (Typografie), 7 (Material), 8 (Layout).
   Abweichungen sind in design-system.md Abschnitt 1 einzeln begruendet. */

/* ---------- Schrift, lokal eingebettet. Kein Netz, kein Google. ---------- */

@font-face{
  font-family:"Archivo"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../schrift/archivo-semibold.woff2") format("woff2");
}
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../schrift/geist-400.woff2") format("woff2");
}
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../schrift/geist-500.woff2") format("woff2");
}
@font-face{
  font-family:"Geist"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../schrift/geist-600.woff2") format("woff2");
}
@font-face{
  font-family:"Geist Mono"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../schrift/geistmono-var.woff2") format("woff2-variations");
}
@font-face{
  font-family:"M PLUS 1 Code"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../schrift/mplus1code.woff2") format("woff2");
}

:root{

  /* ===== Schicht 1 — Rohwerte. Niemand ausser Schicht 2 fasst sie an. ===== */

  /* Neutral-Rampe, zwoelf Stufen, Dark-Spalte aus CI 4.2 */
  --grau-01:#0F0F12;  --grau-02:#161619;  --grau-03:#1D1D23;
  --grau-04:#27272E;  --grau-05:#2F2F38;  --grau-06:#393944;
  --grau-07:#494955;  --grau-08:#5F5F6D;  --grau-09:#848494;
  --grau-10:#9091A0;  --grau-11:#A9A9B8;  --grau-12:#F1F1F5;

  /* Buntfamilien, CI 4.3. Die Flaeche kippt nie mit dem Modus. */
  --gelb-ton:#202500;   --gelb-kante:#4E5A00;
  --gelb-flaeche:#E4FF3D; --gelb-flaeche-hover:#D1EB11;
  --rot-ton:#340F0F;    --rot-kante:#8C2D2D;
  --rot-flaeche:#F5333F;  --rot-flaeche-hover:#E4334C;  --rot-text:#F54248;
  --gruen-ton:#002212;  --gruen-kante:#00673C;
  --gruen-flaeche:#10B981; --gruen-flaeche-hover:#00A66F; --gruen-text:#009A66;
  --gold-ton:#2A1700;   --gold-kante:#774700;
  --gold-flaeche:#E0A83D; --gold-flaeche-hover:#CC9523;  --gold-text:#AF7D00;

  /* ===== Schicht 2 — semantisch. Nur diese benutzen die Bausteine. ===== */

  --n-0:var(--grau-01);
  --n-1:var(--grau-02);
  --n-2:var(--grau-03);
  --n-3:var(--grau-04);
  --n-4:var(--grau-05);

  --border:var(--grau-06);
  --border-strong:var(--grau-07);
  /* --grau-08 hat absichtlich keine Zuordnung. Reserve laut CI 4.4. */

  --solid:var(--grau-09);
  --solid-hover:var(--grau-10);

  --text-3:var(--grau-09);
  --text-2:var(--grau-11);
  --text:var(--grau-12);

  --ink:var(--grau-12);
  --on-ink:var(--grau-01);

  --signal:var(--gelb-flaeche);
  --signal-hover:var(--gelb-flaeche-hover);
  --signal-ton:var(--gelb-ton);
  --signal-kante:var(--gelb-kante);

  --danger:var(--rot-text);
  --danger-fill:var(--rot-flaeche);
  --danger-ton:var(--rot-ton);
  --danger-kante:var(--rot-kante);

  --ok:var(--gruen-text);
  --ok-fill:var(--gruen-flaeche);
  --ok-ton:var(--gruen-ton);
  --ok-kante:var(--gruen-kante);

  --warn:var(--gold-text);
  --warn-fill:var(--gold-flaeche);
  --warn-ton:var(--gold-ton);
  --warn-kante:var(--gold-kante);

  --idle:var(--text-3);
  --on-accent:#0D0D11;         /* CI 4.4: ein Token, beide Modi, alle vier Familien */
  --scrim:rgb(0 0 0 / .60);

  /* ===== Typografie, CI 5.1 und 5.4 ===== */

  --font-display:"Archivo","Geist",-apple-system,system-ui,sans-serif;
  --font-sans:"Geist",-apple-system,system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace;
  --font-jp:"M PLUS 1 Code",var(--font-mono);

  /* Breitenachse. Aktuell wirkungslos, weil die lokale Archivo statisch ist —
     siehe design-system.md, Abweichung A2. Der Token bleibt stehen, damit das
     Scharfschalten spaeter eine Datei kostet und keine Suche. */
  --display-wdth:"wdth" 95;

  --fs-micro:9px;      --lh-micro:1.3;
  --fs-meta:11px;      --lh-meta:1.3;
  --fs-label:12px;     --lh-label:1.35;
  --fs-ui:13px;        --lh-ui:1.45;
  --fs-body:15px;      --lh-body:1.6;
  --fs-title:15px;     --lh-title:1.3;
  --fs-display-s:24px; --lh-display-s:1.25;
  --fs-display-m:26px; --lh-display-m:1.15;
  --fs-display-l:44px; --lh-display-l:1.08;

  --spur-mono:.07em;   /* CI 5.4, Mono CAPS */
  --spur-micro:.10em;

  /* ===== Raum, CI 7.4. 4er-Basis, keine Zwischenwerte. ===== */

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px;

  /* ===== Form, CI 7.3. Radius ist binaer. ===== */

  --r-0:0;
  --r-voll:999px;
  --kante:1px;
  --sig-min:3px;       /* CI 4.5: jede gelbe Form ist mindestens 3px dick */
  --fokus:2px;         /* CI 4.5: Fokusring 2px solid --ink, Offset 2px */
  --fokus-abstand:2px;

  /* ===== Hebung, CI 7.2. Nur fuer Schwebendes. ===== */

  --lift-1:0 2px 8px -2px rgb(0 0 0 / .45);
  --lift-2:0 8px 24px -8px rgb(0 0 0 / .55);
  --lift-3:0 24px 48px -16px rgb(0 0 0 / .65);

  /* ===== Glas, CI 7.1. Nur ueber Inhalt, nur gross. ===== */

  --glass-float-bg:rgb(22 22 25 / .55);
  --glass-float:blur(40px) saturate(1.3);
  --glass-kante-oben:rgb(255 255 255 / .09);
  --glass-kante-unten:rgb(255 255 255 / .03);

  /* ===== Bewegung, CI 7.5 ===== */

  --ease:cubic-bezier(.16,1,.3,1);
  --dauer-ein:200ms;
  --dauer-aus:150ms;

  /* ===== Ergaenzt fuer die Anwendung. Kandidat fuer ein CI-Profil 14.x. =====
     Herleitung in design-system.md 2.3, Quelle ist die Ergonomie-Recherche. */

  --tap:48px;                    /* 9,6 mm — empirisches Minimum fuer serielle Aufgaben */
  --tap-haupt:56px;              /* der blind treffbare Bestaetigungstap */
  --daumen:min(38vh,320px);      /* ortsfeste Bedienzone unten */
  --seitenrand:16px;             /* CI 8, Seitenrand mobil */
  --spalte-max:560px;            /* Lesebreite auf grossen Schirmen */
}

@media (prefers-reduced-motion:reduce){
  :root{ --dauer-ein:1ms; --dauer-aus:1ms; }
}

/* Glas faellt auf solide zurueck, CI 7.1 */
@media (prefers-reduced-transparency:reduce){
  :root{ --glass-float-bg:var(--n-1); --glass-float:none; }
}