/* Hallmark · genre: modern-minimal · macrostructure: Workbench
 * design-system: design.md · designed-as-app · theme: Chronometer
 * tokens.css — single source of truth, alle Werte nur über var() referenzieren
 */

:root {
    /* ── Farben Light ── */
    --c-bg:        oklch(98% 0.004 100);
    --c-surface:   oklch(100% 0 0);
    --c-surface-2: oklch(96% 0.005 100);
    --c-rail-bg:   oklch(15% 0.015 250);
    --c-rail-text: oklch(72% 0.008 250);
    --c-text:      oklch(20% 0.010 250);
    --c-text-2:    oklch(46% 0.010 250);
    --c-text-3:    oklch(60% 0.008 250);
    --c-border:    oklch(90% 0.005 100);
    --c-border-2:  oklch(94% 0.004 100);

    /* Zustandsfarben — Kommen/laufend = grün, Gehen/stoppen = terracotta */
    --c-go:        oklch(56% 0.14 152);
    --c-go-h:      oklch(50% 0.15 152);
    --c-go-dim:    oklch(56% 0.14 152 / 0.12);
    --c-stop:      oklch(57% 0.18 28);
    --c-stop-h:    oklch(51% 0.19 28);
    --c-stop-dim:  oklch(57% 0.18 28 / 0.12);
    --c-accent:    var(--c-go);
    --c-accent-h:  var(--c-go-h);
    --c-accent-dim: var(--c-go-dim);
    --c-on-accent: oklch(99% 0 0);
    --c-warn:      oklch(62% 0.16 65);
    --c-orange:    oklch(62% 0.16 65);

    /* ── Tagestyp-Datenfarben (Heatmap, Badges, Charts) ── */
    --dt-office:   oklch(58% 0.16 255);
    --dt-ho:       oklch(63% 0.12 190);
    --dt-tu:       oklch(63% 0.16 150);
    --dt-krank:    oklch(66% 0.17 50);
    --dt-pzk:      oklch(58% 0.20 300);
    --dt-bzk:      oklch(62% 0.20 350);
    --dt-lzk:      oklch(72% 0.15 85);
    --dt-feiertag: oklch(58% 0.20 25);
    --dt-weekend:  oklch(60% 0.008 250);

    /* ── Typografie ── */
    --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

    --text-xs:  0.72rem;
    --text-sm:  0.84rem;
    --text-md:  0.95rem;
    --text-lg:  1.15rem;
    --text-xl:  1.5rem;
    --text-2xl: 2rem;
    --text-clock: clamp(3.2rem, 7vw, 5.6rem);

    /* ── Spacing (4pt) ── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

    /* ── Radius / Linien ── */
    --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 18px;

    /* ── Motion ── */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms;
    --dur-md:   220ms;
    --dur-sheet: 240ms;

    /* ── Schatten (nur Sheets/Modals/FAB) ── */
    --shadow-sheet: 0 -8px 40px oklch(15% 0.015 250 / 0.18);
    --shadow-modal: 0 12px 48px oklch(15% 0.015 250 / 0.22);
    --shadow-fab:   0 4px 16px oklch(15% 0.015 250 / 0.30);

    /* ── Chrome-Maße ── */
    --rail-w: 68px;
    --tabbar-h: 64px;

    /* ── Legacy-Aliase (gdrive.js Setup-Modal, nicht anfassen) ── */
    --card-bg-light: var(--c-surface);
    --bg-light: var(--c-bg);
    --text-primary-light: var(--c-text);
    --text-secondary-light: var(--c-text-2);
    --border-light: var(--c-border);
    --primary-light: var(--dt-office);
    --border-radius-lg: var(--r-lg);
}

html[data-theme='dark'] {
    --c-bg:        oklch(14% 0.012 250);
    --c-surface:   oklch(19% 0.014 250);
    --c-surface-2: oklch(23% 0.014 250);
    --c-rail-bg:   oklch(11% 0.015 250);
    --c-rail-text: oklch(62% 0.008 250);
    --c-text:      oklch(91% 0.004 100);
    --c-text-2:    oklch(65% 0.008 250);
    --c-text-3:    oklch(52% 0.008 250);
    --c-border:    oklch(28% 0.012 250);
    --c-border-2:  oklch(24% 0.012 250);

    --c-go:        oklch(76% 0.16 152);
    --c-go-h:      oklch(82% 0.17 152);
    --c-go-dim:    oklch(76% 0.16 152 / 0.14);
    --c-stop:      oklch(70% 0.16 28);
    --c-stop-h:    oklch(76% 0.17 28);
    --c-stop-dim:  oklch(70% 0.16 28 / 0.14);
    --c-on-accent: oklch(15% 0.015 250);

    --dt-office:   oklch(66% 0.14 255);
    --dt-ho:       oklch(70% 0.11 190);
    --dt-tu:       oklch(70% 0.14 150);
    --dt-krank:    oklch(72% 0.15 50);
    --dt-pzk:      oklch(66% 0.17 300);
    --dt-bzk:      oklch(70% 0.17 350);
    --dt-lzk:      oklch(78% 0.13 85);
    --dt-feiertag: oklch(64% 0.18 25);

    --shadow-sheet: 0 -8px 40px oklch(0% 0 0 / 0.45);
    --shadow-modal: 0 12px 48px oklch(0% 0 0 / 0.50);
    --shadow-fab:   0 4px 16px oklch(0% 0 0 / 0.45);
}