/* TiviGlass web foundation.
   Neutral, editorial and product-led: one primary accent, sharp hierarchy,
   quiet surfaces and restrained geometry.

   ONE base :root, then a light theme block and a dark theme block. This file
   used to carry a second, later :root ("restored-from-HEAD") that silently
   re-declared the whole type scale, the radii, the spacing and the brand ramp
   — so the values written at the top of the file were not the values the site
   rendered. The two blocks are now merged; the surviving values are the ones
   that were already winning, so nothing moved visually when they were folded
   together. Add a token once, here. */

/* ── Responsive breakpoint convention ────────────────────────────────────────
   CSS custom properties can't be used inside @media conditions and this static
   site has no CSS build step, so breakpoints stay literal px. To keep the ~20
   historical values from growing further, use ONE of these canonical widths for
   any NEW or edited media query:

       1024px  desktop → tablet
        768px  tablet → large phone
        600px  phone (primary)
        420px  small phone

   Do NOT retire the two coupled magic numbers that JS also reads:
     • 920px — marketing nav hamburger collapse (js/site.js closes the menu on
       resize >920; paired with the collapse rules in css/marketing.css).
     • 820px — admin "pulse" tab centering (js/account-portal.js matchMedia).
   Change those only in lockstep with their JS partner.
   ──────────────────────────────────────────────────────────────────────────── */

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

    /* Brand ramp. There is ONE accent on this site; the brand gradient is a
       shade of it, not a third palette. (It used to be an unrelated
       teal → blue → amber ramp while --accent was indigo, so the same page
       could show two "brand" colours that had nothing to do with each other.)
       --accent / --accent-bright / --accent-link are set per theme below. */
    --brand-1: var(--accent);
    --brand-2: var(--accent-bright);
    --brand-3: var(--accent-link);
    --brand-gradient: linear-gradient(110deg, var(--brand-1), var(--brand-2));
    --brand-gradient-soft: linear-gradient(
        135deg,
        color-mix(in srgb, var(--brand-1) 10%, transparent),
        color-mix(in srgb, var(--brand-3) 5%, transparent)
    );

    /* Status hues. Colour is semantic: success = healthy/active/paid, warning =
       needs attention, error = failed/blocked/destructive. The -soft / -line
       companions are derived from these in each theme block — never hand-typed,
       or they drift away from the hue they are supposed to tint. */
    --success: #167342;
    --warning: #985500;
    --error: #c33731;
    --live: #c42854;

    /* PRO premium marker — warm amber, deliberately outside the accent ramp. */
    --pro-from: #f59e0b;
    --pro-to: #d97706;
    --pro-ink: #291b00;
    --pro-gradient: linear-gradient(135deg, var(--pro-from), var(--pro-to));
    --pro-soft: rgb(245 158 11 / 12%);
    --pro-line: rgb(245 158 11 / 40%);

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

    /* Fluid marketing type scale — restrained display sizes. */
    --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-lead: clamp(1.08rem, 1rem + 0.4vw, 1.28rem);
    --fs-h3: clamp(1.28rem, 1.16rem + 0.55vw, 1.55rem);
    --fs-h2: clamp(1.8rem, 1.46rem + 1.7vw, 2.55rem);
    --fs-h1: clamp(2.35rem, 1.85rem + 2.3vw, 3.6rem);
    --fs-display: clamp(1.95rem, 1.4rem + 2.7vw, 2.95rem);

    /* Fixed portal type scale. The signed-in portal is a dense data surface, so
       it does NOT use the fluid marketing scale above — a table cell must not
       change size with the viewport. Six steps, nothing below 12px. */
    --portal-title: 1.75rem; /* 28px — one per page (.console-view-title) */
    --portal-title-sm: 1.375rem; /* 22px — h3 acting as a sub-view title      */
    --portal-section: 1.0625rem; /* 17px — panel / card headings              */
    --portal-body: 1rem; /* 16px — body copy, form values */
    --portal-small: 0.875rem; /* 14px — table cells and controls */
    --portal-micro: 0.75rem; /* 12px — secondary metadata and badges */

    --lh-tight: 1.08;
    --lh-snug: 1.2;
    --lh-base: 1.6;
    --lh-relaxed: 1.7;
    --tracking-tight: -0.015em;
    --tracking-display: -0.02em;
    --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(56px, 7.5vw, 112px);
    --section-y-compact: clamp(44px, 6vw, 80px);
    --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);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 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;

    /* Legacy portal aliases.
       A handful of rules restored from before the redesign still reference the
       old portal palette (--portal-panel and friends). Those definitions were
       part of a teal design the redesign replaced, so resurrecting them would
       drag the old colours back in alongside the new ones. Aliasing instead
       means the restored rules pick up the CURRENT palette.

       An undefined var() with no fallback computes to nothing — for a
       background or a fill that reads as transparent or black, which is
       precisely the failure that made the dashboard charts render as solid
       black rectangles. These are defined so that cannot happen again. */
    --portal-panel: var(--surface);
    --portal-panel-soft: var(--surface-soft);
    --portal-panel-muted: var(--surface-strong);
    --portal-shadow: var(--shadow-card);
    --portal-shadow-hover: var(--shadow-lg);
    --portal-plan-muted: var(--text-on-dark-soft);
    --portal-plan-text: var(--text-on-dark);
}

:root,
:root[data-theme='light'] {
    color-scheme: light;

    --bg: #f5f7fa;
    --bg-deep: #eef1f5;
    --surface: #ffffff;
    --surface-soft: #f0f3f7;
    --surface-strong: #ffffff;
    --surface-raised: #ffffff;
    --panel-dark: #0a0b0f;
    --panel-dark-soft: #12131a;

    --text: #283548;
    --text-strong: #142238;
    --text-soft: #566579;
    --text-faint: #64748b;
    --text-on-dark: #f7f7f5;
    --text-on-dark-soft: rgb(247 247 245 / 66%);

    --line: rgb(17 18 23 / 10%);
    --line-strong: rgb(17 18 23 / 19%);
    --line-dark: rgb(255 255 255 / 12%);

    --accent: #235cd7;
    --accent-bright: #1748ad;
    --accent-ink: #ffffff;
    --accent-soft: rgb(35 92 215 / 7%);
    --accent-strong: rgb(35 92 215 / 16%);
    --accent-link: #1d50be;

    --ring: rgb(35 92 215 / 28%);
    --focus-ring: 0 0 0 3px var(--ring);
    --focus-offset: 2px;

    --success-soft: color-mix(in srgb, var(--success) 9%, transparent);
    --warning-soft: color-mix(in srgb, var(--warning) 10%, transparent);
    --error-soft: color-mix(in srgb, var(--error) 9%, transparent);
    --success-line: color-mix(in srgb, var(--success) 25%, transparent);
    --warning-line: color-mix(in srgb, var(--warning) 25%, transparent);
    --error-line: color-mix(in srgb, var(--error) 25%, transparent);
    --live-soft: color-mix(in srgb, var(--live) 9%, transparent);
    --live-line: color-mix(in srgb, var(--live) 25%, transparent);

    --shadow-xs: 0 1px 2px rgb(15 16 21 / 5%);
    --shadow-sm: 0 8px 24px rgb(15 16 21 / 6%);
    --shadow-md: 0 20px 54px rgb(15 16 21 / 9%);
    --shadow-lg: 0 36px 90px rgb(15 16 21 / 14%);
    --shadow-soft: var(--shadow-sm);
    --shadow-strong: var(--shadow-lg);
    --shadow-card: 0 2px 8px rgb(20 34 56 / 4%);
    --shadow-button: 0 1px 2px rgb(20 34 56 / 12%);
    --shadow-glow: 0 0 0 3px var(--ring);

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

:root[data-theme='dark'] {
    color-scheme: dark;

    --success: #69d391;
    --warning: #efb862;
    --error: #ff9490;
    --live: #ff8daa;

    --bg: #101720;
    --bg-deep: #0c121b;
    --surface: #161f2c;
    --surface-soft: #1b2737;
    --surface-strong: #213044;
    --surface-raised: #26364b;
    --panel-dark: #050609;
    --panel-dark-soft: #0e0f14;

    --text: #e4e4e2;
    --text-strong: #fafaf8;
    --text-soft: #b0bdce;
    --text-faint: #96a8bf;
    --text-on-dark: #fafaf8;
    --text-on-dark-soft: rgb(250 250 248 / 66%);

    --line: rgb(255 255 255 / 9%);
    --line-strong: rgb(255 255 255 / 17%);
    --line-dark: rgb(255 255 255 / 12%);

    --accent: #8bb5ff;
    --accent-bright: #b0ceff;
    --accent-ink: #090a10;
    --accent-soft: rgb(139 181 255 / 10%);
    --accent-strong: rgb(139 181 255 / 22%);
    --accent-link: #a5c5ff;

    --ring: rgb(139 181 255 / 34%);
    --focus-ring: 0 0 0 3px var(--ring);
    --focus-offset: 2px;

    --success-soft: color-mix(in srgb, var(--success) 12%, transparent);
    --warning-soft: color-mix(in srgb, var(--warning) 12%, transparent);
    --error-soft: color-mix(in srgb, var(--error) 12%, transparent);
    --success-line: color-mix(in srgb, var(--success) 28%, transparent);
    --warning-line: color-mix(in srgb, var(--warning) 28%, transparent);
    --error-line: color-mix(in srgb, var(--error) 28%, transparent);
    --live-soft: color-mix(in srgb, var(--live) 12%, transparent);
    --live-line: color-mix(in srgb, var(--live) 28%, transparent);

    --shadow-xs: 0 1px 3px rgb(0 0 0 / 20%);
    --shadow-sm: 0 10px 28px rgb(0 0 0 / 24%);
    --shadow-md: 0 24px 64px rgb(0 0 0 / 32%);
    --shadow-lg: 0 42px 110px rgb(0 0 0 / 46%);
    --shadow-soft: var(--shadow-sm);
    --shadow-strong: var(--shadow-lg);
    --shadow-card: 0 2px 8px rgb(0 0 0 / 12%);
    --shadow-button: 0 1px 2px rgb(0 0 0 / 20%);
    --shadow-glow: 0 0 0 3px var(--ring);

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