/* ==========================================================================
   Telvar design tokens
   Light is the default; dark follows the visitor's system setting.
   Lime is reserved for "success / all fine" moments (status dots, highlights).
   ========================================================================== */

:root {
    /* Brand */
    --c-primary: #0d6a9e;
    --c-primary-hover: #0a5782;
    --c-primary-soft: rgba(13, 106, 158, 0.1);
    --c-lime: #8aaa00;            /* graphics & fills */
    --c-lime-bright: #c8e600;     /* on dark backgrounds */
    --c-lime-text: #536b00;       /* lime used as text on light backgrounds (AA) */
    --c-lime-soft: rgba(138, 170, 0, 0.14);
    --c-navy: #0d2a4a;
    --c-navy-deep: #081c32;
    --c-sky: #1a9ecf;

    /* Status */
    --c-ok: var(--c-lime);
    --c-warn: #e0a31a;
    --c-danger: #d64545;

    /* Surfaces & text (light) */
    --c-bg: #f7f7f4;
    --c-surface: #ffffff;
    --c-tint: #eef2f3;
    --c-text: #0f1b2d;
    --c-text-muted: #4d5b72;
    --c-border: #e1e5ea;
    --c-border-strong: #cdd3db;
    --c-header: rgba(247, 247, 244, 0.78);

    /* Dark "stage" sections are dark in both themes */
    --stage-bg: #081c32;
    --stage-surface: #0f2641;
    --stage-border: rgba(255, 255, 255, 0.1);
    --stage-text: #eef3f8;
    --stage-muted: #a9b8cc;

    /* Typography */
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    --fs-display: clamp(2.75rem, 1.4rem + 5.6vw, 6rem);
    --fs-display-md: clamp(2.4rem, 1.45rem + 3.9vw, 4.6rem);
    --fs-h2: clamp(1.9rem, 1.25rem + 2.5vw, 3.35rem);
    --fs-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
    --fs-h4: 1.125rem;
    --fs-lead: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
    --fs-body: 1.0625rem;
    --fs-small: 0.9375rem;
    --fs-xs: 0.8125rem;
    --lh-tight: 1.04;
    --lh-heading: 1.12;
    --lh-body: 1.6;
    --tracking-display: -0.035em;
    --tracking-heading: -0.025em;

    /* Spacing */
    --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;
    --space-9: 6rem;
    --section: clamp(4rem, 2.4rem + 6.5vw, 9.5rem);
    --container: 1320px;
    --container-narrow: 780px;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --header-h: 72px;

    /* Shape */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.05), 0 2px 8px rgba(15, 27, 45, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 27, 45, 0.06), 0 16px 40px rgba(15, 27, 45, 0.08);
    --shadow-lg: 0 10px 30px rgba(8, 28, 50, 0.12), 0 40px 90px rgba(8, 28, 50, 0.16);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 0.2s;
    --dur: 0.7s;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-primary: #1a9ecf;
        --c-primary-hover: #3db2de;
        --c-primary-soft: rgba(26, 158, 207, 0.14);
        --c-lime: #b5d000;
        --c-lime-text: #c8e600;
        --c-lime-soft: rgba(200, 230, 0, 0.12);

        --c-bg: #0a1320;
        --c-surface: #101c2e;
        --c-tint: #0d1828;
        --c-text: #eef2f7;
        --c-text-muted: #a3afc2;
        --c-border: #1f2d44;
        --c-border-strong: #2c3d58;
        --c-header: rgba(10, 19, 32, 0.78);

        --stage-bg: #050e1a;
        --stage-surface: #0c1a2d;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
        --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);

        color-scheme: dark;
    }
}