/* ==========================================================================
   Kreidekasten · tokens.css
   Design-Codex, Richtung B „Blatt an der Tafel“:
   Tafelgrüner Rahmen, gelesen und ausgefüllt wird auf Papier.

   Regeln
   - Hex-Werte stehen NUR im Abschnitt „Grundfarben“. Alles andere nutzt Tokens.
   - Komponenten verwenden nur die Kontext-Tokens (--kk-bg, --kk-ink, …).
     Welche Werte sie haben, entscheidet die Fläche, auf der sie liegen:
       :root / .kk-tafel / .kk-header  → Tafel (der Rahmen, immer dunkel)
       .kk-paper                       → Papier (Arbeitsflächen, dunkel auf hell)
   - Es gibt bewusst keinen hellen Modus und keinen Umschalter (Entscheidung
     11.10.2026): Lesen und Ausfüllen passiert ohnehin auf Papier.
   - Reihenfolge einbinden: tokens.css, dann components.css.
   ========================================================================== */

@layer tokens, base, layout, components, utilities;

/* --------------------------------------------------------------------------
   Schriften: selbst gehostet, SIL Open Font License 1.1 (Lizenztexte liegen
   neben den Dateien). Variable Schrift, Schnitte 400 bis 700, Zeichenumfang
   Latein mit Erweiterung A (Türkisch, Polnisch …), Satzzeichen, € − ≈ ≤ ≥ ≠ √ ∞.
   ★ ✓ → sind nicht in der Schrift: als SVG setzen (siehe components.css).
   Zahlen (Preise, Seiten, Zähler) in derselben Schrift mit Tabellenziffern;
   Mono nur für Code, aus den Systemschriften.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-var.6e89890564e8.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


@layer tokens {
  :root {
    /* ---------------- Grundfarben ---------------- */
    /* Tafel (dunkler Rahmen) */
    --kk-c-tafel: #22392f;
    --kk-c-tafel-tief: #1b2e26;
    --kk-c-tafel-licht: #2c4a3d;
    --kk-c-tafel-linie: #46604f;
    --kk-c-tafel-rand: #87a092;
    --kk-c-kreide: #f2efe4;
    --kk-c-kreide-grau: #b9c7bd;
    --kk-c-kreidegelb: #ecd27a;
    --kk-c-kreidegruen: #a6dcae;
    --kk-c-kreideorange: #f4bb75;
    --kk-c-kreiderot: #f6a89e;


    /* Papier */
    --kk-c-papier: #f8f6ef;
    --kk-c-weiss: #ffffff;
    --kk-c-tinte: #1c2a24;
    --kk-c-tinte-grau: #525f58;
    --kk-c-papier-linie: #dcddd4;
    --kk-c-papier-rand: #838c85;
    --kk-c-papier-gewaehlt: #e6eee8;
    --kk-c-gruen: #2f5d49;
    --kk-c-gruen-tief: #244a3a;
    --kk-c-gruen-ok: #2b6639;
    --kk-c-braun: #845500;
    --kk-c-rot: #a3322a;
    --kk-c-hauch-info: #edf1ec;
    --kk-c-hauch-ok: #e2eedf;
    --kk-c-hauch-warn: #f6ebd5;
    --kk-c-hauch-fehler: #f6e0dc;

    /* Druck */
    --kk-c-druck-schwarz: #000000;
    --kk-c-druck-grau: #3d3d3d;
    --kk-c-druck-linie: #999999;
    --kk-c-druck-rand: #666666;

    /* Pfeil im Auswahlfeld (Datenadresse, CSP erlaubt img-src data:) */
    --kk-chevron-dunkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2a24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --kk-chevron-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2efe4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

    /* ---------------- Schrift ---------------- */
    --kk-font-sans: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --kk-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    --kk-fs-xs: 0.8125rem;   /* 13 px  Überzeilen, Abzeichen */
    --kk-fs-sm: 0.9375rem;   /* 15 px  Hinweise, Metadaten */
    --kk-fs-md: 1.0625rem;   /* 17 px  Fließtext, Felder, Knöpfe */
    --kk-fs-lg: 1.25rem;     /* 20 px  h3, Seitenleiste */
    --kk-fs-xl: 1.5rem;      /* 24 px  h2, Wortmarke, Beträge */
    --kk-fs-2xl: clamp(1.75rem, 1.45rem + 1.1vw, 2.125rem); /* 28–34 px  h1 */

    --kk-lh-text: 1.55;
    --kk-lh-snug: 1.35;
    --kk-lh-tight: 1.2;
    --kk-fw-regular: 400;
    --kk-fw-bold: 700;
    --kk-tracking-caps: 0.08em;
    --kk-measure: 68ch;

    /* ---------------- Abstände (4-px-Raster) ---------------- */
    --kk-space-1: 0.25rem;  /*  4 */
    --kk-space-2: 0.5rem;   /*  8 */
    --kk-space-3: 0.75rem;  /* 12 */
    --kk-space-4: 1rem;     /* 16 */
    --kk-space-5: 1.5rem;   /* 24 */
    --kk-space-6: 2rem;     /* 32 */
    --kk-space-7: 3rem;     /* 48 */
    --kk-space-8: 4rem;     /* 64 */
    --kk-gutter: clamp(1rem, 3vw, 2rem);
    --kk-pad-paper: clamp(1.125rem, 3.5vw, 2.5rem);

    /* ---------------- Formen ---------------- */
    --kk-radius-sm: 4px;
    --kk-radius: 6px;
    --kk-radius-pill: 999px;
    --kk-line-thin: 1px;
    --kk-line-bold: 2px;
    --kk-line-mark: 3px;
    --kk-focus-width: 3px;
    --kk-focus-offset: 2px;
    --kk-shadow-overlay: 0 0.5rem 1.5rem -0.75rem rgb(0 0 0 / 0.45); /* nur Aufklapper und Rückmeldung */

    /* ---------------- Größen und Breiten ---------------- */
    --kk-target: 2.75rem;        /* 44 px Mindestgröße für Bedienelemente */
    --kk-target-sm: 2.25rem;
    --kk-icon: 1.25rem;
    --kk-icon-sm: 1.125rem;
    --kk-width-page: 75rem;      /* 1200 px */
    --kk-width-main-min: 34rem;  /* ab hier steht die Seitenleiste daneben */
    --kk-width-aside: 18rem;
    --kk-width-card-min: 15rem;
    --kk-width-sheet-min: 13.5rem;
    /* Umbruchpunkte (in Media Queries nicht als Variable nutzbar):
       30em = 480 px schmal, 48em = 768 px mittel, 60em = 960 px breit */

    /* ---------------- Bewegung und Ebenen ---------------- */
    --kk-duration: 150ms;
    --kk-ease: ease-out;
    --kk-z-popover: 10;
    --kk-z-toast: 20;
    --kk-z-skip: 30;

    /* Feste Flächen, unabhängig vom Kontext */
    --kk-toast-bg: var(--kk-c-tinte);        /* Rückmeldung unten */
    --kk-toast-ink: var(--kk-c-papier);
    --kk-sheet-bg: var(--kk-c-weiss);        /* Blattvorschau ist immer Papier */
    --kk-skip-bg: var(--kk-c-papier);
    --kk-skip-ink: var(--kk-c-tinte);
    --kk-selection-bg: var(--kk-c-kreidegelb);
    --kk-selection-ink: var(--kk-c-tafel);
  }

  /* ---------------- Kontext: Tafel ----------------
     Gilt für die ganze Seite und die Kopfleiste; .kk-tafel schaltet
     innerhalb von Papier zurück auf Tafel. */
  :root,
  .kk-tafel,
  .kk-header {
    color-scheme: dark;
    --kk-bg: var(--kk-c-tafel);
    --kk-field: var(--kk-c-tafel-tief);
    --kk-sel: var(--kk-c-tafel-licht);
    --kk-btn-bg: transparent;
    --kk-ink: var(--kk-c-kreide);
    --kk-muted: var(--kk-c-kreide-grau);
    --kk-line: var(--kk-c-tafel-linie);
    --kk-line-strong: var(--kk-c-tafel-rand);
    --kk-accent: var(--kk-c-kreide);          /* Hauptknopf: Kreideweiß */
    --kk-accent-hover: var(--kk-c-weiss);
    --kk-on-accent: var(--kk-c-tafel);
    --kk-focus: var(--kk-c-kreidegelb);
    --kk-mark: var(--kk-c-kreidegelb);        /* aktueller Schritt, aktive Navigation */
    --kk-on-mark: var(--kk-c-tafel);
    --kk-mark-line: var(--kk-c-kreidegelb);   /* Kreidestrich, nur Schmuck */
    --kk-raster: var(--kk-c-kreidegelb);      /* gelbe Doppellinie */
    --kk-link: var(--kk-c-kreide);
    --kk-link-line: var(--kk-c-kreidegelb);
    --kk-star: var(--kk-c-kreidegelb);
    --kk-ok: var(--kk-c-kreidegruen);
    --kk-on-ok: var(--kk-c-tafel);
    --kk-warn: var(--kk-c-kreideorange);
    --kk-err: var(--kk-c-kreiderot);
    --kk-on-err: var(--kk-c-tafel);
    --kk-info-soft: rgb(242 239 228 / 0.06);
    --kk-ok-soft: rgb(166 220 174 / 0.12);
    --kk-warn-soft: rgb(244 187 117 / 0.12);
    --kk-err-soft: rgb(246 168 158 / 0.14);
    --kk-chevron: var(--kk-chevron-hell);
  }


  /* ---------------- Kontext: Papier ---------------- */
  .kk-paper {
    color-scheme: light;
    --kk-bg: var(--kk-c-papier);
    --kk-field: var(--kk-c-weiss);
    --kk-sel: var(--kk-c-papier-gewaehlt);
    --kk-btn-bg: var(--kk-c-weiss);
    --kk-ink: var(--kk-c-tinte);
    --kk-muted: var(--kk-c-tinte-grau);
    --kk-line: var(--kk-c-papier-linie);
    --kk-line-strong: var(--kk-c-papier-rand);
    --kk-accent: var(--kk-c-gruen);
    --kk-accent-hover: var(--kk-c-gruen-tief);
    --kk-on-accent: var(--kk-c-weiss);
    --kk-focus: var(--kk-c-gruen);
    --kk-mark: var(--kk-c-gruen);
    --kk-on-mark: var(--kk-c-weiss);
    --kk-mark-line: var(--kk-c-gruen);
    --kk-link: var(--kk-c-gruen);
    --kk-link-line: var(--kk-c-gruen);
    --kk-star: var(--kk-c-braun);
    --kk-ok: var(--kk-c-gruen-ok);
    --kk-on-ok: var(--kk-c-weiss);
    --kk-warn: var(--kk-c-braun);
    --kk-err: var(--kk-c-rot);
    --kk-on-err: var(--kk-c-weiss);
    --kk-info-soft: var(--kk-c-hauch-info);
    --kk-ok-soft: var(--kk-c-hauch-ok);
    --kk-warn-soft: var(--kk-c-hauch-warn);
    --kk-err-soft: var(--kk-c-hauch-fehler);
    --kk-chevron: var(--kk-chevron-dunkel);
  }

  /* ---------------- Rücksicht auf Einstellungen ---------------- */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --kk-duration: 0ms;
    }
  }

  /* Druck: alles wird Papier, schwarz auf weiß */
  @media print {
    :root,
    .kk-tafel,
    .kk-header,
    .kk-paper {
      color-scheme: light;
      --kk-bg: var(--kk-c-weiss);
      --kk-field: var(--kk-c-weiss);
      --kk-sel: var(--kk-c-weiss);
      --kk-btn-bg: var(--kk-c-weiss);
      --kk-ink: var(--kk-c-druck-schwarz);
      --kk-muted: var(--kk-c-druck-grau);
      --kk-line: var(--kk-c-druck-linie);
      --kk-line-strong: var(--kk-c-druck-rand);
      --kk-accent: var(--kk-c-druck-schwarz);
      --kk-on-accent: var(--kk-c-weiss);
      --kk-mark: var(--kk-c-druck-schwarz);
      --kk-on-mark: var(--kk-c-weiss);
      --kk-link: var(--kk-c-druck-schwarz);
      --kk-link-line: var(--kk-c-druck-schwarz);
      --kk-star: var(--kk-c-druck-schwarz);
      --kk-ok: var(--kk-c-druck-schwarz);
      --kk-warn: var(--kk-c-druck-schwarz);
      --kk-err: var(--kk-c-druck-schwarz);
      --kk-info-soft: var(--kk-c-weiss);
      --kk-ok-soft: var(--kk-c-weiss);
      --kk-warn-soft: var(--kk-c-weiss);
      --kk-err-soft: var(--kk-c-weiss);
    }
  }
}