/* TechnikBrain design tokens — light theme.
   Source of truth for color, type, spacing, radii, elevation, motion, focus.
   Legacy aliases (marked) keep the pre-refresh pages rendering unchanged while
   individual pages migrate to the new names. See docs/WEBSITE_DESIGN_SPEC.md. */
:root {
    /* ── Surfaces ── */
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --surface-3: #e9eef5;
    --border: rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.14);

    /* ── Text ── */
    --text: #0f172a;
    --text-muted: #475569;
    /* AA-verified by axe: #7c8aa0 measured 3.50:1 on white / 3.19:1 on
       --surface-2 (fails 4.5:1). #5b6879 = 5.67:1 / 5.18:1 and stays a step
       lighter than --text-muted, so the hierarchy is preserved. */
    --text-dim: #5b6879;

    /* ── Brand (blue primary, cyan secondary — use sparingly) ── */
    --primary: #2563eb;             /* darkened from #3b82f6 for AA */
    --primary-strong: #1d4ed8;
    --primary-soft: rgba(37, 99, 235, 0.10);
    --accent: #0891b2;
    --accent-soft: rgba(8, 145, 178, 0.10);

    /* Fill-only tokens (Phase D dark mode): backgrounds that carry WHITE text.
       Kept separate from --primary-strong / --danger because those double as
       TEXT colors, which need to lighten in dark mode while white-text fills
       must stay dark enough for 4.5:1. */
    --btn-primary-hover: #1d4ed8;
    --danger-fill: #b91c1c;

    /* ── Status families (always pair with text — see spec §6) ── */
    --ok: #15803d;        --ok-soft: #dcfce7;     --ok-border: #bbf7d0;
    --warn: #b45309;      --warn-soft: #fef3c7;   --warn-border: #fde68a;
    --danger: #b91c1c;    --danger-soft: #fee2e2; --danger-border: #fecaca;
    --info: #1d4ed8;      --info-soft: #dbeafe;   --info-border: #bfdbfe;
    /* #64748b passed on white (4.76:1) but failed on its own --offline-soft
       chip background (4.34:1); #5b6879 = 5.18:1 there. */
    --offline: #5b6879;   --offline-soft: #f1f5f9;

    /* ── Typography ── */
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', var(--font-body);

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

    /* ── Radii ── */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-full: 999px;

    /* ── Elevation (restrained — no glow) ── */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);

    /* ── Motion ── */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 0.2s;

    /* ── Focus ── */
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.45);

    /* ── Layout ── */
    --container: 1120px;
    --nav-h: 64px;
    --nav-bg: rgba(255, 255, 255, 0.82);
    --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;

    /* ── Gradients (kept subtle) ── */
    --grad-primary: linear-gradient(135deg, #2563eb, #0891b2);
    --grad-hero: linear-gradient(135deg, #eff6ff 0%, #f5f9ff 50%, #ecfeff 100%);

    /* ─────────────────────────────────────────────────────────────
       Legacy aliases — DO NOT reference in new code. They map old
       token names used by not-yet-migrated pages onto the values
       above so nothing visually breaks mid-refresh.
       ───────────────────────────────────────────────────────────── */
    --primary-dark: var(--primary-strong);
    --primary-glow: rgba(37, 99, 235, 0.28);
    --success: var(--ok);
    --shadow-glow: var(--shadow-md);           /* was a blue glow; now a plain shadow */
    --focus: var(--focus-ring);
}

/* ─────────────────────────────────────────────────────────────────
   Dark theme (Phase D). Two entry points, same values:
     1. html[data-theme="dark"]  — explicit user choice (assets/js/theme.js)
     2. prefers-color-scheme     — system preference, unless the user forced
        light via html[data-theme="light"]
   Keep BOTH blocks identical (CSS has no mixin; edit them together).
   Contrast notes (AA): body text #e2e8f0 on #111a2c ≈ 13:1; muted #94a3b8
   ≈ 7:1; links --primary-strong #93c5fd ≈ 9:1; status text tokens ≥ 5:1 on
   their soft chips; white-on-fill buttons keep the light-theme fills
   (#2563eb / #1d4ed8 / #dc2626 — all ≥ 4.5:1 with white, theme-independent).
   Map tiles and photos are NEVER CSS-inverted.
   ───────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
    --bg: #0b1220;
    --surface: #111a2c;
    --surface-2: #16213a;
    --surface-3: #1c2947;
    --border: rgba(148, 163, 184, 0.14);
    --border-strong: rgba(148, 163, 184, 0.26);
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --text-dim: #8b99ad;
    --primary-strong: #93c5fd;              /* text/link usages only */
    --primary-soft: rgba(96, 165, 250, 0.14);
    --accent-soft: rgba(34, 211, 238, 0.12);
    --btn-primary-hover: #1d4ed8;
    --danger-fill: #dc2626;
    --ok: #4ade80;      --ok-soft: rgba(74, 222, 128, 0.12);     --ok-border: rgba(74, 222, 128, 0.32);
    --warn: #fbbf24;    --warn-soft: rgba(251, 191, 36, 0.12);   --warn-border: rgba(251, 191, 36, 0.32);
    --danger: #f87171;  --danger-soft: rgba(248, 113, 113, 0.12); --danger-border: rgba(248, 113, 113, 0.32);
    --info: #93c5fd;    --info-soft: rgba(147, 197, 253, 0.12);  --info-border: rgba(147, 197, 253, 0.32);
    --offline: #94a3b8; --offline-soft: rgba(148, 163, 184, 0.12);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
    --focus-ring: 0 0 0 3px rgba(147, 197, 253, 0.5);
    --grad-hero: linear-gradient(135deg, #0c1526 0%, #0b1220 50%, #0a1a20 100%);
    --primary-glow: rgba(96, 165, 250, 0.25);
    --nav-bg: rgba(11, 18, 32, 0.85);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0b1220;
        --surface: #111a2c;
        --surface-2: #16213a;
        --surface-3: #1c2947;
        --border: rgba(148, 163, 184, 0.14);
        --border-strong: rgba(148, 163, 184, 0.26);
        --text: #e2e8f0;
        --text-muted: #94a3b8;
        --text-dim: #8b99ad;
        --primary-strong: #93c5fd;
        --primary-soft: rgba(96, 165, 250, 0.14);
        --accent-soft: rgba(34, 211, 238, 0.12);
        --btn-primary-hover: #1d4ed8;
        --danger-fill: #dc2626;
        --ok: #4ade80;      --ok-soft: rgba(74, 222, 128, 0.12);     --ok-border: rgba(74, 222, 128, 0.32);
        --warn: #fbbf24;    --warn-soft: rgba(251, 191, 36, 0.12);   --warn-border: rgba(251, 191, 36, 0.32);
        --danger: #f87171;  --danger-soft: rgba(248, 113, 113, 0.12); --danger-border: rgba(248, 113, 113, 0.32);
        --info: #93c5fd;    --info-soft: rgba(147, 197, 253, 0.12);  --info-border: rgba(147, 197, 253, 0.32);
        --offline: #94a3b8; --offline-soft: rgba(148, 163, 184, 0.12);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
        --focus-ring: 0 0 0 3px rgba(147, 197, 253, 0.5);
        --grad-hero: linear-gradient(135deg, #0c1526 0%, #0b1220 50%, #0a1a20 100%);
        --primary-glow: rgba(96, 165, 250, 0.25);
        --nav-bg: rgba(11, 18, 32, 0.85);
    }
}