/* =========================================================
   Design Tokens — Klar
   ----------------------------------------------------------
   Single source of truth for color, spacing, radii, shadows,
   typography and motion.

   The values come from the confirmed Klar reference
   (docs/uiux/klar/referenz/styles.css, block ``.klar``, plus the
   effective overrides in referenz/klar/klar.css). They are kept
   here — and only here — so no module picks a similar colour of
   its own, which UIUX.md rules out explicitly.

   The ``--brand-*``/``--radius-*``/``--text-*`` names below are the
   vocabulary the existing stylesheets already speak. They stay, but
   they now resolve to the Klar palette: a rule nobody has rewritten
   yet renders in the new colours instead of the old ones.
   ========================================================= */

:root {
  color-scheme: light;

  /* ---- Klar core palette (the reference values) ---- */
  --bg: #f5f6fa;
  --surface: #ffffff;
  --ink: #202739;
  /* Der Referenzwert ist #687387. Auf dem getönten Hintergrund (#f5f6fa)
     ergibt der 4,43:1 und verfehlt AA für Fließtext um Haaresbreite — und
     genau dort steht die Hälfte der Sekundärtexte. Um zehn Stufen je Kanal
     abgedunkelt klärt er 4,5:1 auf **allen** Flächen, auf denen er vorkommt:
     Hintergrund 5,13, weiße Fläche 5,54, Mahlzeitenkopf 4,88, Tint 4,80,
     Trennlinie 4,51. Der Charakter bleibt, die Lesbarkeit stimmt.
     ABNAHME.md verlangt die Kontrastprüfung ausdrücklich. */
  --muted: #5e697d;
  --line: #e5e8ef;
  --accent: #5b57d6;
  --tint: #eeedff;
  --hero: #eeedff;
  --hero-ink: #373087;
  --round: 21px;

  /* Macro colours. Never the sole carrier of meaning — always
     paired with a label or a number (UIUX.md, "Gestaltung"). */
  --fat: #8a6bce;
  --carbs: #179187;
  --protein: #ca7730;

  /* Red is for errors and destructive actions only. */
  --danger: #a8343f;
  --danger-soft-bg: #fff0f0;
  --danger-soft-ink: #9e363e;
  --danger-soft-line: #efcdd0;
  --over-goal: #a23e42;
  --success-soft-bg: #eaf4eb;
  --success-soft-ink: #386445;

  --focus-ring: #548eff;

  /* ---- Legacy aliases → Klar ---------------------------------
     Diese Namen stammen aus dem Bestand vor dem Umbau. Sie wurden
     hier auf die Klar-Palette gelegt, damit eine noch nicht
     umgeschriebene Regel in den neuen Farben rendert statt in den
     alten.

     Nachgezählt: **benutzt** werden davon noch --brand-50,
     --brand-500, --brand-600, --success-600, --warning-600,
     --danger-500, --danger-600, --surface-3, --border,
     --border-strong, --text, --text-muted, --text-subtle und
     --overlay-soft. Die übrigen trifft keine Regel mehr.

     Sie stehen trotzdem noch da, und zwar mit Absicht: mehrere
     Vorlagen bauen einen Tokennamen zur Laufzeit zusammen
     (``style="background: var(--{{ macro.color }})"``,
     ``dot.style.background = `var(--${cell.color})` ``). Eine
     Suche über den Quelltext findet solche Namen nicht, also ist
     „kommt nirgends vor" hier kein Beweis für „wird nicht
     gebraucht". Wer aufräumt, prüft je Name die Dienste, die
     Farbnamen liefern — nicht nur die Stylesheets. */
  --brand-50: var(--tint);
  --brand-100: var(--tint);
  --brand-200: #cfcdf5;
  --brand-500: var(--accent);
  --brand-600: var(--accent);
  --brand-700: var(--hero-ink);
  --brand-contrast: #ffffff;

  --accent-400: var(--carbs);
  --accent-500: var(--carbs);
  --accent-600: #0f776f;

  --success-500: #4f9163;
  --success-600: var(--success-soft-ink);
  --warning-500: var(--protein);
  --warning-600: #a25e21;
  --danger-500: var(--danger);
  --danger-600: var(--danger);
  --info-500: var(--accent);
  --info-600: var(--hero-ink);

  --surface-2: var(--bg);
  --surface-3: var(--tint);
  --border: var(--line);
  --border-strong: #d3d8e4;
  --text: var(--ink);
  --text-muted: var(--muted);
  /* Platzhaltertext. #8a93a6 ergab 3,09:1 — lesbar nur für den, der schon
     weiß, was dort steht. */
  --text-subtle: #687184;

  --overlay-soft: rgba(32, 39, 57, 0.04);
  --overlay-strong: rgba(32, 39, 57, 0.08);
  --backdrop: rgba(22, 27, 43, 0.4);

  /* ---- Radius ---- */
  --radius-xs: 7px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: var(--round);
  --radius-pill: 999px;

  /* ---- Elevation — sparingly (UIUX.md) ---- */
  --shadow-xs: 0 1px 2px rgba(32, 39, 57, 0.04);
  --shadow-sm: 0 2px 5px rgba(32, 39, 57, 0.03);
  --shadow-md: 0 5px 13px rgba(37, 35, 74, 0.15);
  --shadow-lg: 0 30px 100px rgba(0, 0, 0, 0.25);
  --shadow-brand: 0 5px 13px rgba(37, 35, 74, 0.15);
  --ring-brand: 0 0 0 1px var(--accent);

  /* ---- Spacing ---- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Typography ---- */
  --font-sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-brand: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Klar sizes are absolute px at 390 px width; rem keeps browser
     text scaling working, which ABNAHME.md asks for explicitly. */
  --text-2xs: 0.625rem; /* 10 */
  --text-xs: 0.6875rem; /* 11 */
  --text-sm: 0.75rem; /* 12 */
  --text-base: 0.8125rem; /* 13 */
  --text-md: 0.875rem; /* 14 */
  /* Zwei Maße, die die T-Shirt-Reihe oben nicht benennt. Das Konzept ist
     ein gemessener Satz, keine geometrische Reihe; wer sie in die Reihe
     zwingt, rundet sie in etwas anderes. 16 px ist außerdem die Grenze,
     unterhalb derer iOS beim Fokus in ein Eingabefeld hineinzoomt — die
     Referenz setzt genau 16 px auf ``.field input`` und ``.search-box input``. */
  --text-15: 0.9375rem; /* 15 */
  /* ``max(1rem, 16px)``, nicht ``1rem``: unter 16 px zoomt iOS beim Fokus in
     ein Eingabefeld hinein, und wer seine Grundschrift verkleinert hat, fiele
     mit einem reinen ``rem`` genau darunter. Die Textvergrößerung nach oben
     bleibt erhalten, der Sprung nach unten ist abgeschnitten. */
  --text-16: max(1rem, 16px); /* 16 */
  --text-lg: 1.0625rem; /* 17 */
  --text-xl: 1.1875rem; /* 19 */
  --text-2xl: 1.4375rem; /* 23 */
  --text-3xl: 1.625rem; /* 26 */
  --text-27: 1.6875rem; /* 27 — h1 auf schmalen Geräten */
  --text-4xl: 1.875rem; /* 30 */

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms var(--ease);
  --t-med: 200ms var(--ease);
  --t-slow: 250ms var(--ease-out);

  /* ---- Layout ----
     No fixed 390 x 844 frame in production: the shell fills the
     window. These are gutters and bar heights, not a device. */
  --container-max: 560px;
  --content-max: 560px;
  --page-gutter: 18px;
  --app-header-h: 60px;
  --bottom-nav-h: 76px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* 320 px and other narrow phones: the reference tightens the gutter
   and a handful of sizes rather than shrinking everything. */
@media (max-width: 350px) {
  :root {
    --page-gutter: 15px;
  }
}

@media (min-width: 560px) {
  :root {
    --page-gutter: 22px;
  }
}