/* TiviGlass design tokens — clean modern streaming-product system (2026 rebuild).
   Light-first, trustworthy SaaS look: white/soft-grey surfaces, near-black ink,
   an indigo accent, soft shadows (no glassmorphism), Inter typeface, medium
   rounded shapes. Token NAMES are kept stable so every component + page inherits
   the new look; only the VALUES changed. A matching clean dark mode lives under
   [data-theme="dark"]. */

:root {
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

    /* Brand gradient: broadcast teal -> clean blue -> warm premium amber. */
    --brand-1: #15b8a6;
    --brand-2: #2f6fed;
    --brand-3: #f59e0b;
    --brand-gradient: linear-gradient(95deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%);

    /* Accent — bright teal for actions and focus states. */
    --accent: #15a99a;
    --accent-bright: #24c7b7;
    --accent-ink: #ffffff;

    /* Status hues — modern, accessible. */
    --success: #16a34a;
    --warning: #d97706;
    --error: #dc2626;
    --live: #e11d48;

    /* PRO premium accent — warm amber, distinct from the indigo. */
    --pro-from: #f59e0b;
    --pro-to: #d97706;
    --pro-ink: #ffffff;
    --pro-gradient: linear-gradient(135deg, var(--pro-from), var(--pro-to));
    --pro-soft: rgba(245, 158, 11, 0.12);
    --pro-line: rgba(245, 158, 11, 0.4);

    /* Radii — compact, product-like, and less bubbly. */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 18px;
    --radius-pill: 999px;

    /* Fluid type scale. */
    --fs-mono-eyebrow: 0.78rem;
    --fs-xs: 0.82rem;
    --fs-sm: 0.92rem;
    --fs-base: 1rem;
    --fs-md: clamp(1.04rem, 0.98rem + 0.3vw, 1.2rem);
    --fs-lg: clamp(1.2rem, 1.08rem + 0.6vw, 1.45rem);
    --fs-h3: clamp(1.28rem, 1.12rem + 0.8vw, 1.5rem);
    --fs-h2: clamp(2rem, 1.5rem + 2.6vw, 3.2rem);
    --fs-h1: clamp(2.6rem, 1.6rem + 5.2vw, 4.8rem);
    --fs-display: clamp(2rem, 1.3rem + 3.4vw, 3.1rem);
    --lh-tight: 1.06;
    --lh-snug: 1.2;
    --lh-base: 1.6;
    --lh-relaxed: 1.7;
    --tracking-tight: 0;
    --tracking-label: 0.1em;
    --tracking-wide: 0.14em;
    --weight-reg: 400;
    --weight-med: 500;
    --weight-semi: 600;
    --weight-bold: 700;

    /* Spacing scale (4px base). */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --section-y: clamp(64px, 9vw, 132px);
    --section-y-compact: clamp(48px, 7vw, 88px);
    --gutter: 24px;

    /* Motion. */
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --dur-xfast: 120ms;
    --dur-fast: 170ms;
    --dur-med: 300ms;
    --dur-slow: 560ms;
    --reveal-stagger: 40ms;

    /* Layout. */
    --wrap: min(100% - 48px, 1120px);
    --wrap-wide: min(100% - 48px, 1280px);
    --wrap-narrow: min(100% - 48px, 740px);
    --wrap-admin: min(100% - 48px, 1480px);
    --blur-soft: 0px;
    --blur-strong: 12px;
    --blur-card: 0px;
}

/* Light theme (default). */
:root,
:root[data-theme='light'] {
    color-scheme: light;

    --bg: #fbfbf8;
    --bg-deep: #f0f3ef;
    --surface: #ffffff;
    --surface-soft: #f4f6f3;
    --surface-strong: #ffffff;
    --panel-dark: #0f1320;
    --panel-dark-soft: #1a1f30;

    --text: #121412;
    --text-strong: #080a08;
    --text-soft: #505850;
    --text-faint: #858d84;
    --text-on-dark: #ffffff;
    --text-on-dark-soft: rgba(255, 255, 255, 0.78);

    --line: #e4e7e1;
    --line-strong: #cfd5cc;
    --line-dark: rgba(255, 255, 255, 0.12);

    --accent: #0f9f90;
    --accent-bright: #13b8a6;
    --accent-ink: #ffffff;
    --accent-soft: rgba(15, 159, 144, 0.11);
    --accent-strong: rgba(15, 159, 144, 0.26);
    --accent-link: #0b766d;

    --success-soft: rgba(22, 163, 74, 0.12);
    --warning-soft: rgba(217, 119, 6, 0.12);
    --error-soft: rgba(220, 38, 38, 0.1);
    --success-line: rgba(22, 163, 74, 0.3);
    --warning-line: rgba(217, 119, 6, 0.3);
    --error-line: rgba(220, 38, 38, 0.3);
    --live-soft: rgba(225, 29, 72, 0.1);
    --live-line: rgba(225, 29, 72, 0.3);

    --shadow-soft: 0 1px 2px rgba(18, 20, 18, 0.04), 0 18px 44px rgba(18, 20, 18, 0.08);
    --shadow-strong: 0 2px 5px rgba(18, 20, 18, 0.06), 0 30px 70px rgba(18, 20, 18, 0.14);
    --shadow-card: 0 1px 2px rgba(18, 20, 18, 0.04), 0 10px 30px rgba(18, 20, 18, 0.07);
    --shadow-button: 0 1px 2px rgba(18, 20, 18, 0.12), 0 10px 24px rgba(15, 159, 144, 0.24);
    --shadow-glow: 0 0 0 4px rgba(15, 159, 144, 0.14);

    /* Aurora retired — kept as transparent so any legacy reference is a no-op. */
    --aurora-1: transparent;
    --aurora-2: transparent;
    --aurora-3: transparent;
    --aurora-base-from: var(--bg);
    --aurora-base-to: var(--bg);
}

/* Clean dark theme (alt) — charcoal + indigo, flat and modern (no navy/glass). */
:root[data-theme='dark'] {
    color-scheme: dark;

    --bg: #11130f;
    --bg-deep: #090b09;
    --surface: #191c17;
    --surface-soft: #20241d;
    --surface-strong: #272c24;
    --panel-dark: #090b09;
    --panel-dark-soft: #151813;

    --text: #f6f7f1;
    --text-strong: #ffffff;
    --text-soft: #b8c0b3;
    --text-faint: #7e8879;
    --text-on-dark: #ffffff;
    --text-on-dark-soft: rgba(255, 255, 255, 0.78);

    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.18);
    --line-dark: rgba(255, 255, 255, 0.1);

    --accent: #24c7b7;
    --accent-bright: #62dfd3;
    --accent-ink: #07100e;
    --accent-soft: rgba(36, 199, 183, 0.15);
    --accent-strong: rgba(36, 199, 183, 0.32);
    --accent-link: #62dfd3;

    --success-soft: rgba(22, 163, 74, 0.18);
    --warning-soft: rgba(217, 119, 6, 0.18);
    --error-soft: rgba(220, 38, 38, 0.18);
    --success-line: rgba(22, 163, 74, 0.4);
    --warning-line: rgba(217, 119, 6, 0.4);
    --error-line: rgba(220, 38, 38, 0.4);
    --live-soft: rgba(225, 29, 72, 0.18);
    --live-line: rgba(225, 29, 72, 0.4);

    --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.36), 0 20px 52px rgba(0, 0, 0, 0.44);
    --shadow-strong: 0 4px 10px rgba(0, 0, 0, 0.48), 0 34px 78px rgba(0, 0, 0, 0.58);
    --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.3), 0 14px 34px rgba(0, 0, 0, 0.36);
    --shadow-button: 0 8px 20px rgba(36, 199, 183, 0.24);
    --shadow-glow: 0 0 0 4px rgba(36, 199, 183, 0.2);

    --aurora-1: transparent;
    --aurora-2: transparent;
    --aurora-3: transparent;
    --aurora-base-from: var(--bg);
    --aurora-base-to: var(--bg);
}