/* Design tokens extracted from skynet1chatbot.com on 2026-08-12.
 * Source: /home/cgerard7/skynet-controller/static/index.html and login.html,
 * both of which carry their CSS inline in a <style> block. Nothing here is
 * invented. Every skynetprecon component is built from these variables.
 * See docs/decisions.md.
 */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;900&family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
  /* fonts, exactly as skynet1chatbot loads them */
  --f-display: 'Big Shoulders Display', sans-serif;
  --f-mono: 'Share Tech Mono', 'SFMono-Regular', Consolas, monospace;
  --f-body: 'Rajdhani', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* HUD text, the chatbot's --fd stack, so the shared banner pieces match. */
  --f-hud: 'SFMono-Regular', Consolas, 'Roboto Mono', 'DejaVu Sans Mono', monospace;

  /* red ramp, the Skynet accent */
  --r1: #FF4444;
  --r2: #FF1111;
  --r3: #CC2222;
  --r4: #882222;
  --r5: #441111;
  --r6: #220808;
  --rg: rgba(255, 68, 68, .22);
  --rg2: rgba(255, 68, 68, .08);

  /* blue ramp, used for secondary state and data. Dark mode: the same blue
     as the AMERXICA lettering in the dark logo (#4277ab, sampled 2026-08-21),
     by request; it was the Skynet cyan #00DDFF before. */
  --c1: #4277AB;
  --c2: #35608A;
  --c3: #264562;
  --c4: #172A3B;

  /* surfaces */
  --bg: #0b0c0f;
  --bg2: #17181c;
  --bg3: #202226;
  --bg4: #2b2d33;
  --surface: rgba(255, 255, 255, .03);
  --surface2: rgba(255, 255, 255, .06);

  /* text */
  --tx1: #EDEFF3;
  --tx2: #C7CBD3;
  --tx3: #A6ABB6;
  --tx4: #828794;

  /* borders and depth */
  --bd1: rgba(205, 210, 220, .28);
  --bd2: rgba(205, 210, 220, .14);
  --bd3: rgba(205, 210, 220, .07);
  --sh1: 0 4px 24px rgba(0, 0, 0, .7);
  --sh2: 0 2px 12px rgba(0, 0, 0, .5);
  --glow: 0 0 20px rgba(255, 50, 50, .26);
  --metal: linear-gradient(180deg, #4a4d54 0%, #2c2e33 5%, #1c1d21 45%, #131417 100%);
  --metal-hi: rgba(255, 255, 255, .14);

  /* status colors. alert is the Skynet red, warning is derived from it so the
     palette stays one family, ok borrows the cyan. */
  --alert: var(--r1);
  --alert-bg: rgba(255, 68, 68, .12);
  --warn: #E8A33D;
  --warn-bg: rgba(232, 163, 61, .12);
  --ok: var(--c1);
  --ok-bg: rgba(66, 119, 171, .16);
  /* info: a suggestion the estimator has not agreed to yet. Blue, so it is
     neither the alert red nor the ok cyan. */
  --info: #7FA6FF;
  --info-bg: rgba(127, 166, 255, .12);

  /* Layout. The ui-spec called for 150 and 190 pixel rails, which suited a
     laptop. This is desktop-only work in practice, and the right rail is where
     drawings get read, so it is given real room and grows with the viewport.
     Overridden per breakpoint below. */
  --rail-left: 172px;
  --rail-right: 400px;
  --shell-max: 2100px;
  --radius: 2px;
}


/* ── LIGHT THEME ──────────────────────────────────────────────────────────
 * Lifted from skynet1chatbot.com the same way the dark palette was, so the two
 * sites read as one system in either mode. Only the surfaces, text, borders and
 * depth move. The red and cyan ramps are the brand and stay where they are,
 * with the accent stepping down from --r1 to --r3 because a light background
 * does not need the brighter red to carry.
 *
 * Written out twice on purpose. The first block follows the operating system,
 * and is skipped once the toggle has explicitly asked for dark. The second is
 * the toggle asking for light on a machine set to dark. A single selector
 * cannot express both, and grouping them would make the media query apply to
 * the manual case too.
 */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f0f2f5;
    --bg2: #ffffff;
    --bg3: #f8f9fa;
    --bg4: #edf0f3;
    --surface: rgba(0, 0, 0, .03);
    --surface2: rgba(0, 0, 0, .05);
    --tx1: #1a202c;
    --tx2: #2d3748;
    --tx3: #2f3a4a;
    --tx4: #414d5e;
    --c1: #0A6E85;
    --c2: #085A6D;
    --bd1: rgba(70, 75, 85, .20);
    --bd2: rgba(70, 75, 85, .11);
    --bd3: rgba(70, 75, 85, .05);
    --sh1: 0 4px 20px rgba(0, 0, 0, .10);
    --sh2: 0 2px 8px rgba(0, 0, 0, .07);
    --glow: 0 0 16px rgba(200, 30, 30, .16);
    --rg: rgba(200, 30, 30, .18);
    --rg2: rgba(200, 30, 30, .05);
    --metal: linear-gradient(180deg, #ffffff 0%, #f3f5f7 12%, #e4e7eb 55%, #d3d7dd 100%);
    --metal-hi: rgba(255, 255, 255, .9);
    --r1: #CC2222;
    --alert: #CC2222;
    --alert-bg: rgba(200, 30, 30, .10);
    --warn: #9A6510;
    --warn-bg: rgba(154, 101, 16, .12);
    --ok: #0F7C93;
    --ok-bg: rgba(15, 124, 147, .10);
    --info: #3557C7;
    --info-bg: rgba(53, 87, 199, .10);
  }
}

:root[data-theme="light"] {
  --bg: #f0f2f5;
  --bg2: #ffffff;
  --bg3: #f8f9fa;
  --bg4: #edf0f3;
  --surface: rgba(0, 0, 0, .03);
  --surface2: rgba(0, 0, 0, .05);
  --tx1: #1a202c;
  --tx2: #2d3748;
  --tx3: #2f3a4a;
  --tx4: #414d5e;
  --c1: #0A6E85;
  --c2: #085A6D;
  --bd1: rgba(70, 75, 85, .20);
  --bd2: rgba(70, 75, 85, .11);
  --bd3: rgba(70, 75, 85, .05);
  --sh1: 0 4px 20px rgba(0, 0, 0, .10);
  --sh2: 0 2px 8px rgba(0, 0, 0, .07);
  --glow: 0 0 16px rgba(200, 30, 30, .16);
  --rg: rgba(200, 30, 30, .18);
  --rg2: rgba(200, 30, 30, .05);
  --metal: linear-gradient(180deg, #ffffff 0%, #f3f5f7 12%, #e4e7eb 55%, #d3d7dd 100%);
  --metal-hi: rgba(255, 255, 255, .9);
  --r1: #CC2222;
  --alert: #CC2222;
  --alert-bg: rgba(200, 30, 30, .10);
  --warn: #9A6510;
  --warn-bg: rgba(154, 101, 16, .12);
  --ok: #0F7C93;
  --ok-bg: rgba(15, 124, 147, .10);
  --info: #3557C7;
  --info-bg: rgba(53, 87, 199, .10);
}