/* ========================================================================
   Design Tokens — Sparkfabrik Timetracker
   OKLCH color system with brand-tinted neutrals, dark mode via system pref.
   ======================================================================== */

:root {
    color-scheme: light dark;

    /* --- Brand palette --- */
    /* Red + blue are the primary Sparkfabrik brand colors.
       Green is shifted toward teal (hue 168 vs pure green 140) so
       deuteranopes / protanopes can distinguish it from red by hue
       rather than relying on lightness alone. */
    --brand-red: oklch(0.59 0.25 27);
    --brand-red-hover: oklch(0.50 0.22 27);
    --brand-blue: oklch(0.55 0.17 250);
    --brand-blue-hover: oklch(0.47 0.15 250);
    --brand-navy: oklch(0.15 0.04 250);
    --brand-green: oklch(0.62 0.16 168);
    --brand-orange: oklch(0.72 0.17 70);

    /* --- Surfaces (tinted toward brand navy hue 250) --- */
    --bg: oklch(0.965 0.005 250);
    --bg-raised: oklch(0.993 0.002 250);
    --bg-sunken: oklch(0.94 0.007 250);
    --bg-overlay: oklch(0.15 0.04 250 / 0.7);

    /* --- Borders --- */
    --border: oklch(0.89 0.01 250);
    --border-subtle: oklch(0.93 0.006 250);

    /* --- Text --- */
    --text: oklch(0.15 0.04 250);
    --text-secondary: oklch(0.38 0.02 250);
    --text-muted: oklch(0.55 0.015 250);
    --text-on-brand: oklch(0.98 0.003 250);

    /* --- Semantic surfaces --- */
    --surface-success: oklch(0.92 0.04 168);
    --surface-warning: oklch(0.92 0.05 70);
    --surface-danger: oklch(0.92 0.05 27);
    --text-success: oklch(0.40 0.12 168);
    --text-warning: oklch(0.42 0.10 70);

    /* --- Focus ring --- */
    --ring: oklch(0.55 0.17 250 / 0.25);

    /* --- Typography --- */
    --font-display: 'Saira Condensed', sans-serif;
    --font-body: 'Figtree', sans-serif;

    /* --- Type scale (fixed rem, 1.25 Major Third ratio) --- */
    --text-xs: 0.875rem;     /* 14px — micro badges, timestamps */
    --text-sm: 1rem;         /* 16px — labels, inputs, nav, secondary */
    --text-base: 1.25rem;    /* 20px — body, slot labels, primary */
    --text-lg: 1.5625rem;    /* 25px — timer, subheadings, slot totals */
    --text-xl: 2rem;         /* 32px — page headings, modal titles */

    /* --- Line heights for condensed display font --- */
    --lh-tight: 1.1;        /* xl/lg headings */
    --lh-snug: 1.2;         /* sm/xs badges, labels, nav */
    --lh-normal: 1.4;       /* base body text */

    /* --- Spacing (4pt scale) --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* --- Radius --- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 3px oklch(0.15 0.04 250 / 0.06);
    --shadow-md: 0 4px 12px oklch(0.15 0.04 250 / 0.08);
    --shadow-lg: 0 8px 24px oklch(0.15 0.04 250 / 0.12);

    /* --- Transitions --- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --duration-fast: 120ms;
    --duration-normal: 200ms;
    --duration-slow: 350ms;

    /* --- Legacy aliases (used by JS inline styles) --- */
    --navy: var(--brand-navy);
    --red: var(--brand-red);
    --blue: var(--brand-blue);
    --white: var(--text-on-brand);
    --gray-100: var(--bg-sunken);
    --gray-200: var(--border);
    --gray-400: var(--text-muted);
    --gray-600: var(--text-secondary);
    --gray-800: var(--text);
    --green: var(--brand-green);
    --orange: var(--brand-orange);
    --bg-card: var(--bg-raised);
    --surface: var(--bg-raised);
    --font-heading: var(--font-display);
}

/* --- Dark theme --- */
@media (prefers-color-scheme: dark) {
    :root {
        /* Brand colors: soften for dark backgrounds.
           Red — lower chroma (0.25→0.18), raise lightness (0.59→0.65),
           warmer hue to reduce harshness on dark surfaces.
           Green — shift hue toward teal (150→168) so deuteranopes and
           protanopes can distinguish it from red by hue, not just lightness. */
        --brand-red: oklch(0.65 0.18 24);
        --brand-red-hover: oklch(0.57 0.16 24);
        --brand-blue: oklch(0.70 0.14 250);
        --brand-blue-hover: oklch(0.60 0.12 250);
        --brand-green: oklch(0.68 0.14 168);
        --brand-orange: oklch(0.72 0.14 72);

        --bg: oklch(0.14 0.025 250);
        --bg-raised: oklch(0.20 0.02 250);
        --bg-sunken: oklch(0.10 0.02 250);
        --bg-overlay: oklch(0.05 0.02 250 / 0.8);

        --border: oklch(0.28 0.015 250);
        --border-subtle: oklch(0.23 0.012 250);

        --text: oklch(0.92 0.005 250);
        --text-secondary: oklch(0.78 0.012 250);
        --text-muted: oklch(0.68 0.015 250);

        --surface-success: oklch(0.22 0.035 168);
        --surface-warning: oklch(0.22 0.04 72);
        --surface-danger: oklch(0.22 0.035 24);
        --text-success: oklch(0.72 0.12 168);
        --text-warning: oklch(0.72 0.12 72);

        --ring: oklch(0.55 0.17 250 / 0.35);

        --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.2);
        --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
        --shadow-lg: 0 8px 24px oklch(0 0 0 / 0.4);
    }
}

/* Manual theme override via data attribute */
[data-theme="dark"] {
    --brand-red: oklch(0.65 0.18 24);
    --brand-red-hover: oklch(0.57 0.16 24);
    --brand-blue: oklch(0.70 0.14 250);
    --brand-blue-hover: oklch(0.60 0.12 250);
    --brand-green: oklch(0.68 0.14 168);
    --brand-orange: oklch(0.72 0.14 72);

    --bg: oklch(0.14 0.025 250);
    --bg-raised: oklch(0.20 0.02 250);
    --bg-sunken: oklch(0.10 0.02 250);
    --bg-overlay: oklch(0.05 0.02 250 / 0.8);

    --border: oklch(0.28 0.015 250);
    --border-subtle: oklch(0.23 0.012 250);

    --text: oklch(0.92 0.005 250);
    --text-secondary: oklch(0.78 0.012 250);
    --text-muted: oklch(0.68 0.015 250);

    --surface-success: oklch(0.22 0.035 168);
    --surface-warning: oklch(0.22 0.04 72);
    --surface-danger: oklch(0.22 0.035 24);
    --text-success: oklch(0.72 0.12 168);
    --text-warning: oklch(0.72 0.12 72);

    --ring: oklch(0.55 0.17 250 / 0.35);

    --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px oklch(0 0 0 / 0.3);
    --shadow-lg: 0 8px 24px oklch(0 0 0 / 0.4);
}

[data-theme="light"] {
    /* Reset brand colors to light-mode intensity (overrides @media dark :root) */
    --brand-red: oklch(0.59 0.25 27);
    --brand-red-hover: oklch(0.50 0.22 27);
    --brand-green: oklch(0.62 0.16 168);
    --brand-orange: oklch(0.72 0.17 70);

    --bg: oklch(0.965 0.005 250);
    --bg-raised: oklch(0.993 0.002 250);
    --bg-sunken: oklch(0.94 0.007 250);
    --bg-overlay: oklch(0.15 0.04 250 / 0.7);

    --border: oklch(0.89 0.01 250);
    --border-subtle: oklch(0.93 0.006 250);

    --text: oklch(0.15 0.04 250);
    --text-secondary: oklch(0.38 0.02 250);
    --text-muted: oklch(0.55 0.015 250);

    --surface-success: oklch(0.92 0.04 168);
    --surface-warning: oklch(0.92 0.05 70);
    --surface-danger: oklch(0.92 0.05 27);
    --text-success: oklch(0.40 0.12 168);
    --text-warning: oklch(0.42 0.10 70);

    --ring: oklch(0.55 0.17 250 / 0.25);

    --shadow-sm: 0 1px 3px oklch(0.15 0.04 250 / 0.06);
    --shadow-md: 0 4px 12px oklch(0.15 0.04 250 / 0.08);
    --shadow-lg: 0 8px 24px oklch(0.15 0.04 250 / 0.12);
}

/* ========================================================================
   Reset & Base
   ======================================================================== */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--lh-normal);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Focus indicator for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px;
}

/* --- Condensed font line-height defaults ---
   Saira Condensed has narrow letterforms that look cramped at inherited
   body line-height (1.4) but clip at tight (1.1). Use snug (1.2) for
   all small UI chrome, tight (1.1) for large headings. */
h1, h2, h3, .modal h2 {
    line-height: var(--lh-tight);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}