/*
 * tokens -- Rohwerte des Projekts als Custom Properties auf :root.
 * Enthält keine Blöcke, nur Werte: Farben, Schrift, Abstände, Radien,
 * Schatten, Layout-Maße und Maße für Bedienelemente.
 * Zwei Zustände: helles und dunkles Farbschema, beide gleichwertig.
 *
 * Die neutralen Töne hängen an einer einzigen Stelle: --accent-hue. Grau, Rand
 * und Schrift beziehen ihren Farbton daraus, in hell wie in dunkel.
 *
 * Seit dem 26. Oktober 2026 die Farben des Kunden (Stil in
 * `_project_docs/claude_design/trail-style.md`), app-weit, auch in der Verwaltung
 * (User): Dunkelgrün #4b5a2d, Mittelgrün #748e2a, Hellgrün #d3d800. Jede hat ihre
 * Rolle aus ihrem Kontrast (WCAG AA):
 *   Dunkelgrün  im hellen Schema die Hausfarbe -- Knöpfe, Verweise, Fokus (7,3:1,
 *               Weiß darauf ebenso). Im dunklen Schema nur Fläche (2,4:1).
 *   Mittelgrün  nur Schmuck: große Schrift, Symbole, Linien (3,6:1 hell, 5,1:1
 *               dunkel). Nie Fließtext, nie ein Knopf mit weißer Schrift.
 *   Hellgrün    heißt überall „Hier wird gestempelt"; im dunklen Schema die
 *               Hausfarbe (12:1). Auf Weiß nie Schrift und nie Linie (1,5:1).
 *               Schrift darauf fast schwarz (10:1).
 */

:root {
  /* Farbton der neutralen Töne: der der Kundenfarben */
  --accent-hue: 124;

  /* Die Farben des Kunden, unverändert */
  --color-brand-dark: #4b5a2d;
  --color-brand-medium: #748e2a;
  --color-brand-light: #d3d800;
  /* Beim Zeigen wird Hellgrün heller, nicht dunkler -- dunkler kippt es ins Oliv */
  --color-brand-light-hover: #e9ee6f;
  /* Schrift auf Hellgrün, in beiden Schemata dieselbe */
  --color-on-brand-light: oklch(25% 0.05 var(--accent-hue));
  /* Schrift auf dunklem Grün und Oliv (Fuß), in beiden Schemata dieselbe */
  --color-on-brand-dark: oklch(99% 0.002 var(--accent-hue));
  --color-on-brand-dark-muted: oklch(90% 0.03 118);

  /* Die Abschnitte der Seiten (layout__band): der Grund grau mit einem Hauch Grün, die
     Karten darauf weiß; ein heller Abschnitt setzt beides um (Weiß, Karten grau) */
  --color-band: oklch(94.5% 0.014 var(--accent-hue));
  --color-card: oklch(100% 0 0);
  /* Schmuck: große Schrift, Symbole, Linien -- nie Fließtext */
  --color-decorative: var(--color-brand-medium);

  /* Farben -- helles Schema */
  --color-background: oklch(99% 0.002 var(--accent-hue));
  --color-surface: oklch(96.5% 0.006 var(--accent-hue));
  --color-text: oklch(22% 0.012 var(--accent-hue));
  --color-text-muted: oklch(45% 0.012 var(--accent-hue));
  --color-border: oklch(87% 0.008 var(--accent-hue));
  /* Umrisse von Bedienelementen brauchen 3:1 zum Hintergrund, Trennlinien nicht */
  --color-border-strong: oklch(60% 0.014 var(--accent-hue));
  --color-primary: var(--color-brand-dark);
  --color-primary-hover: oklch(37% 0.065 var(--accent-hue));
  --color-on-primary: oklch(99% 0.002 var(--accent-hue));
  --color-error: oklch(48% 0.17 25);
  --color-error-hover: oklch(40% 0.17 25);
  --color-on-error: oklch(99% 0.002 var(--accent-hue));
  /* Kein Fehler, aber etwas, das jemand wissen sollte, bevor er weitermacht */
  --color-warning: oklch(52% 0.12 75);
  /* Geglückt. Bewusst die Akzentfarbe: ein zweites Grün daneben wäre nicht zu
     unterscheiden, und Zustimmung ist die Farbe des Hauses */
  --color-success: var(--color-primary);
  --color-focus: var(--color-primary);
  /* Die Fläche über der Seite, wenn ein Dialog offen ist */
  --color-scrim: oklch(0% 0 0 / 0.45);

  /* Schrift -- Manrope ist in base.css eingebunden; bis sie geladen ist, die Systemschrift */
  --font-family-base: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-size-small: 0.875rem;
  --font-size-base: 1rem;
  --font-size-large: 1.125rem;
  --font-size-title: 1.5rem;
  --font-size-display: clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  /* Die Überschrift einer Seite (layout__title), das Größte auf der Seite */
  --font-size-hero: clamp(2rem, 1rem + 5vw, 4.5rem);
  /* Monospace wirkt bei gleicher Größe größer als die Grundschrift */
  --font-size-code: 0.9375em;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  /* Namen und Überschriften in Karten; Manrope reicht bis 800 */
  --font-weight-heavy: 800;
  --line-height-base: 1.6;
  --line-height-tight: 1.25;
  --underline-offset: 0.2em;

  /* Abstände */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Ränder */
  --border-width: 1px;

  /* Radien */
  --radius-small: 0.25rem;
  --radius-medium: 0.5rem;
  --radius-large: 1rem;
  --radius-full: 999px;

  /* Schatten */
  --shadow-small: 0 1px 2px oklch(0% 0 0 / 0.08);
  --shadow-medium: 0 2px 8px oklch(0% 0 0 / 0.12);

  /* Layout -- die Spalte von Gast und Teilnehmer, am Desktop breit (trail-style.md);
     bis 26. Oktober 2026 waren es 500px */
  --content-max: 76rem;
  /* Die Verwaltung stellt zwei Spalten nebeneinander und braucht mehr */
  --content-max-wide: 80rem;
  --page-gutter: var(--space-4);
  --header-height: 3.5rem;
  --drawer-width: min(20rem, 85vw);
  --sidebar-width: 15rem;
  /* Ab dieser Breite bekommt eine Kennzahl eine eigene Spalte */
  --stat-min-width: 8rem;
  /* Kantenlänge eines Vorschaubildes in den Listen der Verwaltung */
  --thumbnail-size: 6rem;

  /* Bedienelemente -- 44px ist die vorgegebene Trefferfläche, kein Gestaltungswert */
  --tap-target: 44px;
  --icon-size: 24px;
  /* Kantenlänge von Ankreuzfeldern und Auswahlknöpfen */
  --choice-size: 1.5rem;
  /* Gleicht den unsichtbaren Überstand der Trefferfläche aus, damit das Symbol
     selbst auf der Inhaltskante sitzt und nicht seine Klickfläche */
  --control-flush: calc((var(--tap-target) - var(--icon-size)) / -2);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Bewegung */
  --transition-fast: 120ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: oklch(17% 0.012 var(--accent-hue));
    --color-surface: oklch(22% 0.014 var(--accent-hue));
    --color-text: oklch(93% 0.008 var(--accent-hue));
    --color-text-muted: oklch(72% 0.012 var(--accent-hue));
    --color-border: oklch(33% 0.012 var(--accent-hue));
    --color-border-strong: oklch(62% 0.016 var(--accent-hue));
    /* Im dunklen Schema ist Hellgrün die Hausfarbe, Schrift darauf fast schwarz */
    --color-primary: var(--color-brand-light);
    --color-primary-hover: var(--color-brand-light-hover);
    --color-on-primary: var(--color-on-brand-light);
    --color-error: oklch(72% 0.15 25);
    --color-error-hover: oklch(80% 0.15 25);
    --color-on-error: oklch(20% 0.03 25);
    --color-warning: oklch(80% 0.12 75);
    --color-band: oklch(16% 0.012 var(--accent-hue));
    --color-card: oklch(23% 0.014 var(--accent-hue));
    --shadow-small: 0 1px 2px oklch(0% 0 0 / 0.4);
    --shadow-medium: 0 2px 8px oklch(0% 0 0 / 0.5);
  }
}