/* =============================================================
   tokens.css  ·  shared/  ·  standalone
   Single source of truth for colors, sizing, type.
   Override here only — never hardcode hex/px in face files.
   ============================================================= */

:root {
    /* ---------- brand (speedtest.net palette: cyan + magenta on dark navy) ---------- */
    --brand: #0F1429;                          /* main app color (deep navy — page body) */
    --brand-active: #22D7FF;                   /* primary accent (cyan — buttons, links, outlines) */
    --accent-magenta: #C829BE;                 /* secondary accent (upload meter, alt highlights) */
    --on-brand: #ffffff;                       /* text/icons on --brand */
    --on-brand-muted: rgba(255, 255, 255, 0.55);

    /* status colors (good / warn / error) */
    --status-good:  #22D77F;                   /* green — matches --brand-active chroma family */
    --status-warn:  #F4C13A;                   /* amber */
    --status-error: #F4424A;                   /* red */

    /* ---------- canvas + frame ---------- */
    --frame: var(--brand);                     /* gutter around the canvas */
    --canvas: #ffffff;                         /* canvas itself (where it's not a band) */
    --canvas-radius: 16px;                     /* R2: rounded-2xl */
    --gutter: 8px;                             /* R3: p-2 */

    /* ---------- canvas inner bands ---------- */
    --header-bg: #05061F;                      /* darker than --brand, framing the main band */
    --footer-bg: #05061F;
    --main-bg: #141526;

    /* card / chip surface — lifts off the main band */
    --card-bg: #26273B;

    /* ---------- ink (text on light surfaces) ---------- */
    --ink: #1b1b2f;                            /* primary text on light bg */
    --muted: #737383;
    --border: #e7e7ec;

    /* ---------- type ----------
       Cyber/HUD vibe: mono everywhere as the primary face. System
       sans is kept as a tertiary fallback for glyphs Share Tech
       Mono doesn't cover (e.g. Arabic / Kurdish channel names). */
    /* Latin: Share Tech Mono. Arabic/Kurdish: Noto Kufi Arabic.
       Browser does per-character fallback — Arabic glyphs aren't in Share
       Tech Mono so they pick up Noto Kufi Arabic automatically. */
    --font-sans: 'Share Tech Mono', 'Noto Kufi Arabic', 'Cascadia Mono', 'Cascadia Code', ui-monospace, Consolas, monospace;
    --font-mono: 'Share Tech Mono', 'Noto Kufi Arabic', 'Cascadia Mono', 'Cascadia Code', ui-monospace, Consolas, monospace;
}