/* tokens.css — the theme token layer. Loaded before every other site sheet.
 *
 * Three tiers (see THEMES_DESIGN.md):
 *   1. Palette slots  --pal-0..15, aliased as --cga-* with --cga-*-rgb triplets.
 *      Retro themes swap these 16 values; canvas-drawn avatars and icons read
 *      --pal-N too, so the art follows.
 *   2. Neutral ramp   --gray-NN (NN ~ lightness %), the greys the sheets use.
 *   3. Semantic tokens: what a thing is (page, surface, text, border, accent …),
 *      defaulting to palette/ramp values. Modern themes retarget these.
 *
 * Every default reproduces the CGA look exactly, so css/themes/cga.css is
 * nearly empty and scripts/theme-verify.py can prove a conversion changed
 * nothing. Themes override tokens under html[data-theme="<id>"].
 */
:root {
    /* ---- 1. Palette slots (CGA order: attribute value = slot number) ---- */
    --pal-0: #000000;   /* black */
    --pal-1: #0000AA;   /* blue */
    --pal-2: #00AA00;   /* green */
    --pal-3: #00AAAA;   /* cyan */
    --pal-4: #AA0000;   /* red */
    --pal-5: #AA00AA;   /* magenta */
    --pal-6: #AA5500;   /* brown */
    --pal-7: #AAAAAA;   /* light gray */
    --pal-8: #555555;   /* dark gray */
    --pal-9: #5555FF;   /* bright blue */
    --pal-10: #55FF55;  /* bright green */
    --pal-11: #55FFFF;  /* bright cyan */
    --pal-12: #FF5555;  /* bright red */
    --pal-13: #FF55FF;  /* bright magenta */
    --pal-14: #FFFF55;  /* yellow */
    --pal-15: #FFFFFF;  /* white */
    /* rgb triplets for rgba(var(--x-rgb), a). Themes must set these alongside --pal-N. */
    --pal-0-rgb: 0, 0, 0;
    --pal-1-rgb: 0, 0, 170;
    --pal-2-rgb: 0, 170, 0;
    --pal-3-rgb: 0, 170, 170;
    --pal-4-rgb: 170, 0, 0;
    --pal-5-rgb: 170, 0, 170;
    --pal-6-rgb: 170, 85, 0;
    --pal-7-rgb: 170, 170, 170;
    --pal-8-rgb: 85, 85, 85;
    --pal-9-rgb: 85, 85, 255;
    --pal-10-rgb: 85, 255, 85;
    --pal-11-rgb: 85, 255, 255;
    --pal-12-rgb: 255, 85, 85;
    --pal-13-rgb: 255, 85, 255;
    --pal-14-rgb: 255, 255, 85;
    --pal-15-rgb: 255, 255, 255;

    /* Named aliases (the names the sheets use) */
    --cga-black: var(--pal-0);
    --cga-blue: var(--pal-1);
    --cga-green: var(--pal-2);
    --cga-cyan: var(--pal-3);
    --cga-red: var(--pal-4);
    --cga-magenta: var(--pal-5);
    --cga-brown: var(--pal-6);
    --cga-light-gray: var(--pal-7);
    --cga-dark-gray: var(--pal-8);
    --cga-bright-blue: var(--pal-9);
    --cga-bright-green: var(--pal-10);
    --cga-bright-cyan: var(--pal-11);
    --cga-bright-red: var(--pal-12);
    --cga-bright-magenta: var(--pal-13);
    --cga-yellow: var(--pal-14);
    --cga-white: var(--pal-15);
    --cga-black-rgb: var(--pal-0-rgb);
    --cga-blue-rgb: var(--pal-1-rgb);
    --cga-green-rgb: var(--pal-2-rgb);
    --cga-cyan-rgb: var(--pal-3-rgb);
    --cga-red-rgb: var(--pal-4-rgb);
    --cga-magenta-rgb: var(--pal-5-rgb);
    --cga-brown-rgb: var(--pal-6-rgb);
    --cga-light-gray-rgb: var(--pal-7-rgb);
    --cga-dark-gray-rgb: var(--pal-8-rgb);
    --cga-bright-blue-rgb: var(--pal-9-rgb);
    --cga-bright-green-rgb: var(--pal-10-rgb);
    --cga-bright-cyan-rgb: var(--pal-11-rgb);
    --cga-bright-red-rgb: var(--pal-12-rgb);
    --cga-bright-magenta-rgb: var(--pal-13-rgb);
    --cga-yellow-rgb: var(--pal-14-rgb);
    --cga-white-rgb: var(--pal-15-rgb);

    /* ---- 2. Neutral ramp (exactly the greys in use; NN ~ lightness %) ---- */
    --gray-0: #000000;
    --gray-2: #050505;
    --gray-4: #0a0a0a;
    --gray-7: #111111;
    --gray-10: #1a1a1a;
    --gray-13: #222222;
    --gray-16: #292929;
    --gray-20: #333333;
    --gray-27: #444444;
    --gray-33: #555555;
    --gray-40: #666666;
    --gray-47: #777777;
    --gray-53: #888888;
    --gray-60: #999999;
    --gray-67: #aaaaaa;
    --gray-80: #cccccc;
    --gray-87: #dddddd;
    --gray-93: #eeeeee;
    --gray-100: #ffffff;
    --gray-50-rgb: 128, 128, 128;   /* rgba(128,128,128,a) hairlines */

    /* ---- 3. Semantic tokens ---- */
    /* Page */
    --page-bg: var(--cga-dark-gray);
    --page-bg-image: none;
    --page-text: var(--cga-light-gray);
    /* Surfaces: cards, panels, lists, inputs sit on --surface; raised steps above it */
    --surface: var(--cga-black);
    --surface-2: var(--gray-7);
    --surface-3: var(--gray-10);
    --surface-4: var(--gray-13);
    --surface-5: var(--gray-20);
    --surface-accent: var(--cga-blue);          /* card headers, table heads, breadcrumb, stripes */
    --surface-accent-text: var(--cga-yellow);
    /* Text */
    --text: var(--cga-light-gray);
    --text-strong: var(--cga-white);
    --text-muted: var(--gray-53);
    --text-dim: var(--gray-40);
    --text-cool: #7c8aa5;
    --heading: var(--cga-white);
    /* Links and accents */
    --link: var(--cga-bright-cyan);
    --link-hover: var(--cga-white);
    --accent: var(--cga-bright-cyan);
    --accent-deep: var(--cga-cyan);
    --accent-2: var(--cga-bright-magenta);
    --accent-2-deep: var(--cga-magenta);
    --accent-3: var(--cga-bright-green);
    --on-accent: var(--cga-black);              /* text on a solid accent button/badge */
    --accent-hover: var(--cga-white);           /* what an accent-filled control becomes on hover */
    --accent-2-hover: var(--cga-white);
    --on-accent-hover: var(--cga-black);
    /* Borders */
    --border: var(--cga-cyan);
    --border-soft: var(--cga-dark-gray);
    --border-strong: var(--cga-bright-cyan);
    /* States */
    --success: var(--cga-bright-green);
    --success-deep: var(--cga-green);
    --warning: var(--cga-yellow);
    --warning-deep: var(--cga-brown);
    --danger: var(--cga-bright-red);
    --danger-deep: var(--cga-red);
    --info: var(--cga-bright-blue);
    --info-deep: var(--cga-blue);
    /* Named accents outside the palette */
    --amber: #ffaa00;
    --amber-rgb: 255, 170, 0;
    --term-green: #33ff33;
    --term-green-rgb: 51, 255, 51;
    --soft-red: #ff8888;
    /* Shape */
    --radius-1: 1px;
    --radius-2: 2px;
    --radius-3: 3px;
    --radius-4: 4px;
    --radius-5: 5px;
    --radius-6: 6px;
    --radius-7: 7px;
    --radius-8: 8px;
    --radius-10: 10px;
    --radius-12: 12px;
    --radius-pill: 999px;
    /* Selection and scrollbars */
    --selection-bg: var(--cga-blue);
    --selection-text: var(--cga-white);
    --scrollbar-thumb: var(--cga-magenta);
    --scrollbar-thumb-hover: var(--cga-bright-magenta);
    --scrollbar-track: var(--cga-black);
    /* Art well: avatars and icons sit in a black round well with a little
       padding on light themes, so pixel art keeps its detail against a light
       page. The well takes the image's own box, so nothing gets wider. */
    --art-well-bg: transparent;
    --art-well-pad: 0;
    --art-well-radius: 0;
    --art-well-hover-grow: 0;   /* how far the well grows round a hovered avatar */
    /* --art-well-frame-color / --art-well-frame-bg: left unset here on purpose. The boxes round
       chat avatars use them with their own values as fallback; a theme with a round well sets
       both to transparent so the box disappears. */
    /* Content column: what shows behind the cards in #content and in page-level
       shells (the chat layout). The surface by default; a theme whose page is a
       desktop sets transparent so the page background shows through wherever
       nothing is drawn, as it does behind the sidebar. */
    --content-bg: var(--surface);
    /* Art bands: rows of ANSI and figlet art (the home page section heads and
       the hero title) sit on one continuous black band on a light page, so the
       black-backed art reads as a deliberate ribbon rather than black slabs
       with gaps. Transparent (the card's own black) by default. */
    --art-band-bg: transparent;
    --art-band-radius: 0;
    /* NewsFlip reader (pages/014-newsflip.xjs, css/newsflip-article.css): its
       surfaces in theme terms. The CGA and Neon themes replace these with the
       reader's own synthwave set; every other theme gets its own colours. */
    --nf-ink: var(--surface);                  /* the reader's page */
    --nf-panel: var(--surface-2);
    --nf-panel-deep: var(--surface);
    --nf-card: var(--surface-2);
    --nf-card-hover: var(--surface-3);
    --nf-chip-selected: var(--surface-3);
    --nf-line: var(--border-soft);
    --nf-pink: var(--accent-2);
    --nf-cyan: var(--accent);
    --nf-violet: var(--info);
    --nf-yellow: var(--warning);
    --nf-text: var(--text);
    --nf-snippet: var(--text);
    --nf-muted: var(--text-muted);
    --nf-shadow: transparent;                  /* the hard offset shadow */
    --nf-glow: transparent;                    /* the soft pink glow */
    --nf-title-shadow: transparent;
    --nf-tab-shadow: transparent;
    --nf-tag: var(--surface-3);                /* topic tag chips */
    --nf-grid-1: transparent;                  /* the background grid lines */
    --nf-grid-2: transparent;
    --nf-blob-1: transparent;                  /* the corner colour washes */
    --nf-blob-2: transparent;
    --nf-tab-active-bg: var(--surface-accent);
    --nf-tab-active-text: var(--surface-accent-text);
    --nf-tab-hover: var(--surface-3);
    --nf-on-pink: var(--on-accent);
    --nf-frame: #ffffff;                       /* the article iframe bed */
    /* Window chrome: mac | win | amiga makes js/window-chrome.js turn card headers
       into title bars the theme draws; none leaves cards alone. */
    --window-chrome: none;
    /* Effects (the neon theme fills these in) */
    --fx-glow: none;
    --fx-glow-magenta: none;
    --fx-border: 1px solid var(--cga-cyan);
    --fx-soft-border: 1px solid var(--cga-dark-gray);
    --fx-card-bg: var(--cga-black);
    --fx-card-shadow: none;
    --fx-navbar-bg: var(--cga-black);
    --fx-navbar-blur: none;
    --fx-navbar-border: 2px solid var(--cga-bright-cyan);
    --fx-card-header-bg: var(--cga-blue);

    /* ---- Bootstrap mapping ---- */
    --bs-body-bg: var(--page-bg);
    --bs-body-color: var(--page-text);
    --bs-primary: var(--accent);
    --bs-secondary: var(--accent-2-deep);
    --bs-success: var(--success-deep);
    --bs-info: var(--info);
    --bs-warning: var(--warning-deep);
    --bs-danger: var(--danger-deep);
    --bs-light: var(--cga-light-gray);
    --bs-dark: var(--cga-dark-gray);
}