/**
 * 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) ──────────────────────── */
    --bg-0: #0e0e10;      /* page background */
    --bg-1: #15151a;      /* raised surface (header strip, hover state) */
    --bg-2: #1a1a1d;      /* card */
    --bg-3: #222226;      /* input field, nested card */
    --bg-4: #2a2a2e;      /* button hover, secondary surface */

    /* ── Borders ────────────────────────────────────────────────────── */
    --border-1: #2a2a2e;  /* default subtle */
    --border-2: #3a3a3e;  /* input default */
    --border-3: #4a4a4e;  /* input hover */
    --border-focus: var(--brand-amber);

    /* ── Text ───────────────────────────────────────────────────────── */
    --text-1: #ffffff;    /* primary headlines + interactive */
    --text-2: #cccccc;    /* body */
    --text-3: #999999;    /* secondary / labels */
    --text-mute: #6b6b70; /* placeholder / disabled */

    /* ── Brand ──────────────────────────────────────────────────────── */
    --brand-amber: #F5A623;
    --brand-amber-hover: #FFB84A;
    --brand-amber-dark: #E8941C;
    --brand-amber-bg: #2a2618;     /* tinted card background */

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

    /* ── Semantic ───────────────────────────────────────────────────── */
    --success:    #2ecc71;
    --success-bg: #163a22;
    --success-border: #2e7d32;

    --warning:    #f0ad4e;
    --warning-bg: #3d3413;
    --warning-border: #6b4a1e;

    --danger:     #e74c3c;
    --danger-bg:  #4a1e1e;
    --danger-border: #c62828;

    --info:       #3498db;
    --info-bg:    #1e2a3a;
    --info-border: #1e4a7d;

    /* ── Flow type accents (S7.GL) ──────────────────────────────────── */
    --flow1: #6db4ff;       --flow1-bg: #1e2a3a;    --flow1-border: #1e4a7d;
    --flow2: #b88dff;       --flow2-bg: #2a1e3a;    --flow2-border: #5a3a7d;

    /* ── 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:   4px;
    --r-md:   6px;
    --r-lg:   8px;
    --r-xl:   10px;
    --r-2xl:  16px;
    --r-pill: 999px;

    /* ── Shadows ────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
    --shadow-md: 0 2px 12px rgba(0,0,0,0.18);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.28);
    --shadow-glow: 0 0 0 3px rgba(245,166,35,0.20);  /* focus glow */

    /* ── 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. */
}