/* 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;

  /* 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);

  /* cyan ramp, used for secondary state and data */
  --c1: #00DDFF;
  --c2: #00AACC;
  --c3: #006688;
  --c4: #003344;

  /* 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(0, 221, 255, .10);

  /* layout, per docs/ui-spec.md */
  --rail-left: 150px;
  --rail-right: 190px;
  --radius: 2px;
}