/**
 * TVGO Portal — Design Tokens
 *
 * (S7.GU) Single source of truth for color, typography, spacing, radius,
 * shadow, and motion across BOTH user portal and admin. Every page CSS
 * file should consume these as `var(--token-name)` — no hardcoded hex
 * values, no per-page palette drift.
 *
 * Brand alignment: the palette mirrors the Android app's
 *   OrangeGO  #F5A623  → primary CTA, focus rings, brand mark
 *   RedAccent #E50914  → destructive, sign-out, error states
 * Pre-S7.GU the portal had drifted to a burgundy #8B0000 primary and
 * 5+ red variants in different files. Tokens make that impossible.
 *
 * Load order: this file MUST come before style.css and admin.css so
 * subsequent rules can reference the variables.
 */

:root {
    /* ── Background surfaces (dark by default) ──────────────────────── */
    /* 2026-09-20: moved off neutral near-black onto the same deep indigo-slate
       the panel now uses. Each step warms slightly as it rises, which is what
       makes a card read as raised rather than merely a different grey. */
    --bg-0: #080B15;      /* page background */
    --bg-1: #10152A;      /* raised surface (header strip, hover state) */
    --bg-2: #171E3A;      /* card */
    --bg-3: #0E1326;      /* input field, nested card */
    --bg-4: #1F2950;      /* button hover, secondary surface */

    /* Soft pools of colour behind the page, so it is not a flat rectangle. */
    --bg-glow-1: rgba(255, 150, 30, .07);
    --bg-glow-2: rgba(80, 120, 255, .08);

    /* ── Borders ────────────────────────────────────────────────────── */
    --border-1: #253060;  /* default subtle */
    --border-2: #2E3A6E;  /* input default */
    --border-3: #38457A;  /* input hover */
    --border-focus: var(--brand-amber);

    /* ── Text ───────────────────────────────────────────────────────── */
    --text-1: #EDF1FF;    /* primary headlines + interactive */
    --text-2: #C2CAE6;    /* body */
    --text-3: #868FB4;    /* secondary / labels */
    --text-mute: #626B8C; /* placeholder / disabled */

    /* ── Brand ──────────────────────────────────────────────────────── */
    /* Amber stays - it is the mark shared with the panel and the Android app.
       It is simply brighter now, and available as a gradient. */
    --brand-amber: #FFAE1F;
    --brand-amber-hover: #FFC24D;
    --brand-amber-dark: #E8941C;
    --brand-amber-bg: #2A2011;     /* tinted card background */
    --brand-amber-grad: linear-gradient(135deg, #FFB92B 0%, #FF8A1E 100%);

    --brand-red: #E50914;
    --brand-red-hover: #FF1F2D;
    --brand-red-dark: #BF0811;
    --brand-red-bg: #2C1220;

    /* ── Semantic ───────────────────────────────────────────────────── */
    /* Brighter and more saturated, so state reads at a glance on a dark
       surface. The -bg values are tinted toward the new indigo rather than
       the old neutral, or they sit on the page like patches. */
    --success:    #2FDCA4;
    --success-bg: #0E2B2C;
    --success-border: #1C6B57;

    --warning:    #FFC043;
    --warning-bg: #2E2717;
    --warning-border: #6E5522;

    --danger:     #FF5A78;
    --danger-bg:  #2E1428;
    --danger-border: #8C2740;

    --info:       #56A8FF;
    --info-bg:    #14203E;
    --info-border: #28508F;

    /* ── Flow type accents (S7.GL) ──────────────────────────────────── */
    --flow1: #6DB4FF;       --flow1-bg: #14203E;    --flow1-border: #28508F;
    --flow2: #A98BFF;       --flow2-bg: #221B42;    --flow2-border: #4C3A8C;
    --flow3: #2AD8EE;       --flow3-bg: #0E2A33;    --flow3-border: #1D6274;
    --flow4: #FF9F6B;       --flow4-bg: #2E1D14;    --flow4-border: #7A472A;

    /* ── Typography ─────────────────────────────────────────────────── */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

    --fs-xs:    11px;
    --fs-sm:    12px;
    --fs-base:  14px;
    --fs-md:    16px;
    --fs-lg:    18px;
    --fs-xl:    22px;
    --fs-2xl:   28px;
    --fs-3xl:   34px;

    --fw-normal:    400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    --lh-tight: 1.25;
    --lh-base:  1.5;
    --lh-loose: 1.7;

    --tracking-tight: -0.3px;
    --tracking-wide:  0.5px;

    /* ── Spacing (4px grid) ─────────────────────────────────────────── */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;

    /* ── Page widths ────────────────────────────────────────────────── */
    --w-page:    1200px;  /* admin */
    --w-narrow:  960px;   /* user portal */
    --w-form:    440px;   /* login / signup */

    /* ── Radius ─────────────────────────────────────────────────────── */
    --r-sm:   5px;
    --r-md:   8px;
    --r-lg:   10px;
    --r-xl:   14px;
    --r-2xl:  18px;
    --r-pill: 999px;

    /* ── Shadows ────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.50);
    --shadow-md: 0 4px 18px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
    --shadow-glow: 0 0 0 3px rgba(255,174,31,0.22);  /* focus glow */
    --shadow-amber: 0 6px 24px rgba(255,138,30,0.28);

    /* ── Motion ─────────────────────────────────────────────────────── */
    --t-fast:   100ms;
    --t-base:   180ms;
    --t-slow:   280ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);

    /* ── Z-index scale ──────────────────────────────────────────────── */
    --z-base:    1;
    --z-raised:  10;
    --z-overlay: 100;
    --z-toast:   1000;
    --z-modal:   2000;

    /* ── Touch / accessibility ──────────────────────────────────────── */
    --tap-min: 44px;       /* minimum interactive height per WCAG */
}

/* (S7.GU) Light-mode opt-in — if a future page sets `data-theme="light"`
   on <html> it can override these. Default everywhere = dark. */
@media (prefers-color-scheme: light) {
    /* Intentionally NOT overriding by default — the brand is dark.
       A future theming push can flip these vars under a data-theme attr. */
}