/* Hallmark · genre: modern-minimal · macrostructure: Workbench (App-Shell) · theme: custom (warm-cream Papier · Tannengrün-Akzent · dunkle Nav) · enrichment: none · nav: N5 · footer: Ft2 · designed-as-app · anchor hue 160 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 */

/* =====================================================
   Notentool — Design-Tokens
   Farbschema des Original-Projekts: warmes Creme-Papier,
   Tannengrün als Marke, dunkle Navigationsleiste.
   Alle Hex-Werte des alten Designs sind hier exakt nach
   OKLCH übersetzt (wahrnehmungs-gleichmässig). Kein Wert
   wird im restlichen CSS frei erfunden — nur über Tokens.
   ===================================================== */

:root {
    /* ---- Flächen (warmes Creme-Papier, kein kühles Grau) ---- */
    --color-paper:   oklch(98.0% 0.006 85);   /* Seitenhintergrund (#faf8f4) */
    --color-paper-2: oklch(95.8% 0.008 84);   /* Hover-Flächen */
    --color-paper-3: oklch(93.0% 0.010 84);   /* aktive Flächen */
    --color-surface: oklch(99.6% 0.002 85);   /* Karten, fast weiss + warmer Hauch */

    /* ---- Text (warmes Fast-Schwarz) ---- */
    --color-ink:     oklch(20.3% 0.010 67);   /* Haupttext (#1a1612) */
    --color-ink-2:   oklch(32% 0.012 64);     /* Zweittext, Button-Hover */
    --color-neutral: oklch(43% 0.011 75);     /* Sekundärtext */
    --color-muted:   oklch(51.8% 0.010 82);   /* Meta-Text (#6b6862, ≥4.5:1) */

    /* ---- Linien (warm) ---- */
    --color-rule:    oklch(91.7% 0.013 82);   /* Karten-Ränder (#e8e3da) */
    --color-rule-2:  oklch(85.3% 0.019 86);   /* Eingabefeld-Ränder (#d4cec1) */

    /* ---- Akzent (Tannengrün) — Marke, Links, Primär-Buttons, Fokus ---- */
    --color-accent:      oklch(38.2% 0.041 166); /* #2d4a3e */
    --color-accent-2:    oklch(52.5% 0.058 164); /* #4a7561, Hover */
    --color-accent-soft: oklch(94.5% 0.011 150); /* #e8efe9 */
    --color-accent-ink:  oklch(98.0% 0.006 85);  /* Creme-Text AUF Grün */
    --color-focus:       oklch(45% 0.075 164);   /* Fokus-Ring (≥3:1) */

    /* ---- Navigation (dunkle Leiste wie im Original) ---- */
    --color-nav-bg:          oklch(15% 0.005 55);    /* #0c0a09 */
    --color-nav-text:        oklch(85.3% 0.019 86);  /* #d4cec1 */
    --color-nav-active:      oklch(38.2% 0.041 166); /* = Akzent */
    --color-nav-active-text: oklch(99% 0.004 85);

    /* ---- Status (funktional, nicht dekorativ) ---- */
    --color-danger:    oklch(47.6% 0.172 27);   /* #a8201f */
    --color-danger-bg: oklch(94.7% 0.022 21);   /* #fce8e7 */
    --color-warn:      oklch(48% 0.10 83);       /* #8a6500, leicht dunkler für Text */
    --color-warn-bg:   oklch(97.7% 0.039 96);    /* #fff8db */
    --color-ok:        oklch(45% 0.12 152);      /* text-sicheres Grün */
    --color-ok-bg:     oklch(94.5% 0.030 152);

    /* ---- Notenstufen 1–5 (Hintergrund + Text, je ≥ 4.5:1) ----
       Rot (ungenügend) → Grün (sehr gut), harmoniert mit der Marke.
       JS vergibt nur Klassennamen, nie Farbwerte. */
    --note-1-bg: oklch(93.5% 0.040 25);  --note-1-text: oklch(48% 0.170 27);
    --note-2-bg: oklch(94% 0.050 60);    --note-2-text: oklch(52% 0.140 50);
    --note-3-bg: oklch(94% 0.050 95);    --note-3-text: oklch(48% 0.100 90);
    --note-4-bg: oklch(93.5% 0.050 140); --note-4-text: oklch(46% 0.120 142);
    --note-5-bg: oklch(93% 0.040 160);   --note-5-text: oklch(44% 0.120 158);

    /* ---- Schrift ----
       Inter trägt den Fliesstext, Bebas Neue ist die Display-Schrift für
       Titel und Wortmarke — klare Hierarchie zwischen Titeln und Fliesstext.
       Zahlen nutzen eine System-Monospace (lädt keine dritte Web-Schrift). */
    --font-body:    "Inter", system-ui, sans-serif;
    --font-display: "Bebas Neue", "Inter", sans-serif;
    --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", monospace;

    /* ---- Schriftgrössen (Verhältnis ~1.2, App-Massstab) ---- */
    --text-xs:   0.6875rem;  /* 11px — Nav-Labels mobil, Badges */
    --text-sm:   0.8125rem;  /* 13px — Feldfehler, Stat-Labels */
    --text-base: 1rem;       /* 16px — Fliesstext */
    --text-md:   1.125rem;   /* 18px — h3 */
    --text-lg:   1.375rem;   /* 22px — h2 */
    --text-xl:   1.75rem;    /* 28px — Promotion-Zeile */
    --text-2xl:  clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); /* h1 */
    --text-stat: clamp(2.5rem, 2rem + 2.2vw, 3.25rem);    /* Gesamtschnitt */

    /* ---- Abstände (4-pt-Raster) ---- */
    --space-2xs: 0.25rem;  /*  4px */
    --space-xs:  0.5rem;   /*  8px */
    --space-sm:  0.75rem;  /* 12px */
    --space-md:  1rem;     /* 16px */
    --space-lg:  1.5rem;   /* 24px */
    --space-xl:  2.5rem;   /* 40px */
    --space-2xl: 4rem;     /* 64px */

    /* ---- Radien ---- */
    --radius-sm:   0.375rem;
    --radius-md:   0.625rem;
    --radius-lg:   1rem;
    --radius-pill: 999px;

    /* ---- Bewegung (nur transform + opacity animieren) ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
    --dur-micro: 120ms;
    --dur-short: 200ms;
    --dur-long:  300ms;

    /* ---- Schatten (leise, warm getönt) ---- */
    --shadow-whisper: 0 1px 2px oklch(20% 0.01 60 / 0.05);
    --shadow-pill:    0 8px 24px -12px oklch(20% 0.02 60 / 0.30);
    --shadow-modal:   0 16px 48px -16px oklch(20% 0.02 60 / 0.30);

    /* ---- Z-Ebenen (benannt statt 9999) ---- */
    --z-fab:   100;
    --z-nav:   200;
    --z-toast: 500;
}