/* ============================================================
   THEME SYSTEM — GeekNetTool Web
   All 6 palettes mirror Theme.swift exactly.
   lcars · opa · inners · martian · system · paper
   ============================================================ */

/* Hard fallback — LCARS default, prevents white flash */
html { background: #000000; }

/* ══════════════════════════════════════════════════════════
   LCARS  —  AMBER  —  "ACCESS GRANTED"
   ══════════════════════════════════════════════════════════ */
html[data-theme="lcars"] {
  --bg:           #000000;
  --bg2:          #0d0800;
  --bg3:          #1a1000;
  --panel:        #1a0e00;
  --panel2:       #0d0800;
  --accent1:      #ff9900;
  --accent2:      #cc88ff;
  --accent3:      #4499ff;
  --accent4:      #ffcc00;
  --accent5:      #ff6644;
  --text:         #ffaa33;
  --text2:        #885522;
  --text3:        #442810;
  --border:       #cc6600;
  --border2:      #ff990030;
  --nav-bg:       #000000;
  --nav-border:   #ff9900;
  --btn-bg:       #ff9900;
  --btn-text:     #000000;
  --btn-hover:    #ffbb33;
  --tag-bg:       #1a0e00;
  --tag-border:   #ff9900;
  --tag-text:     #ff9900;
  --card-bg:      #0d0800;
  --card-border:  #cc6600;
  --ok:           #33ff66;
  --warn:         #ffcc00;
  --crit:         #ff3300;
  --primary:      #00ff55;
  --header-bg:    #ff9900;
  --header-text:  #000000;
  --glow:         0 0 24px #ff990030, 0 0 48px #ff990012;
  --glow2:        0 0 16px #cc88ff35;
  --font-display: 'Share Tech Mono', 'Courier New', monospace;
  --font-body:    'Share Tech', 'Courier New', monospace;
  --radius:       20px;
  --radius-sm:    10px;
  --lcars-strip:  #ff9900;
}

/* ══════════════════════════════════════════════════════════
   OPA  —  MOSS  —  "BELTALOWDA"
   ══════════════════════════════════════════════════════════ */
html[data-theme="opa"] {
  --bg:           #050a03;
  --bg2:          #0a1205;
  --bg3:          #141e0a;
  --panel:        #101a08;
  --panel2:       #080f04;
  --accent1:      #7ec850;
  --accent2:      #b5a642;
  --accent3:      #4a7c2f;
  --accent4:      #c8a228;
  --accent5:      #e07b20;
  --text:         #a8c87a;
  --text2:        #4a6030;
  --text3:        #283818;
  --border:       #2a4018;
  --border2:      #7ec85030;
  --nav-bg:       #030602;
  --nav-border:   #7ec850;
  --btn-bg:       #7ec850;
  --btn-text:     #030602;
  --btn-hover:    #a0e070;
  --tag-bg:       #101a08;
  --tag-border:   #7ec850;
  --tag-text:     #7ec850;
  --card-bg:      #0a1205;
  --card-border:  #2a4018;
  --ok:           #7ec850;
  --warn:         #c8a228;
  --crit:         #e05020;
  --primary:      #00ff55;
  --header-bg:    #3a6020;
  --header-text:  #d8f0b0;
  --glow:         0 0 24px #7ec85028, 0 0 48px #7ec85010;
  --glow2:        0 0 16px #b5a64235;
  --font-display: 'Share Tech Mono', 'Courier New', monospace;
  --font-body:    'Share Tech', 'Courier New', monospace;
  --radius:       4px;
  --radius-sm:    2px;
  --lcars-strip:  #7ec850;
}

/* ══════════════════════════════════════════════════════════
   INNERS  —  TIDE  —  "EARTH · LUNA"
   ══════════════════════════════════════════════════════════ */
html[data-theme="inners"] {
  --bg:           #03070f;
  --bg2:          #070f1c;
  --bg3:          #0c1828;
  --panel:        #0c1828;
  --panel2:       #070f1c;
  --accent1:      #2a9fd6;
  --accent2:      #00e5ff;
  --accent3:      #5ba3c9;
  --accent4:      #7fcdff;
  --accent5:      #1a5c8a;
  --text:         #8ec8e8;
  --text2:        #3a7090;
  --text3:        #1e3a4a;
  --border:       #0e2a44;
  --border2:      #2a9fd630;
  --nav-bg:       #020509;
  --nav-border:   #2a9fd6;
  --btn-bg:       #2a9fd6;
  --btn-text:     #020509;
  --btn-hover:    #4ab8e8;
  --tag-bg:       #0c1828;
  --tag-border:   #2a9fd6;
  --tag-text:     #2a9fd6;
  --card-bg:      #070f1c;
  --card-border:  #0e2a44;
  --ok:           #00ff99;
  --warn:         #ffd44a;
  --crit:         #ff4466;
  --primary:      #00ff55;
  --header-bg:    #0a3a5c;
  --header-text:  #e0f4ff;
  --glow:         0 0 24px #2a9fd628, 0 0 48px #2a9fd610;
  --glow2:        0 0 16px #00e5ff35;
  --font-display: 'Share Tech Mono', 'Courier New', monospace;
  --font-body:    'Share Tech', 'Courier New', monospace;
  --radius:       6px;
  --radius-sm:    3px;
  --lcars-strip:  #2a9fd6;
}

/* ══════════════════════════════════════════════════════════
   MARTIAN  —  RUST  —  "REMEMBER DEIMOS"
   ══════════════════════════════════════════════════════════ */
html[data-theme="martian"] {
  --bg:           #080000;
  --bg2:          #100404;
  --bg3:          #1e0808;
  --panel:        #180606;
  --panel2:       #100404;
  --accent1:      #cc1111;
  --accent2:      #ff3333;
  --accent3:      #ff7744;
  --accent4:      #882200;
  --accent5:      #ffaa44;
  --text:         #d08888;
  --text2:        #994444;
  --text3:        #4a1818;
  --border:       #550000;
  --border2:      #cc111130;
  --nav-bg:       #040000;
  --nav-border:   #cc1111;
  --btn-bg:       #cc1111;
  --btn-text:     #ffe8e8;
  --btn-hover:    #ee2222;
  --tag-bg:       #180606;
  --tag-border:   #cc1111;
  --tag-text:     #d08888;
  --card-bg:      #100404;
  --card-border:  #550000;
  --ok:           #55dd55;
  --warn:         #ff9900;
  --crit:         #ff1111;
  --primary:      #00ff55;
  --header-bg:    #880000;
  --header-text:  #ffe8e8;
  --glow:         0 0 24px #cc111128, 0 0 48px #cc111110;
  --glow2:        0 0 16px #ff333338;
  --font-display: 'Share Tech Mono', 'Courier New', monospace;
  --font-body:    'Share Tech', 'Courier New', monospace;
  --radius:       2px;
  --radius-sm:    1px;
  --lcars-strip:  #cc1111;
}

/* ══════════════════════════════════════════════════════════
   SYSTEM  —  "WHEN IN DOUBT, BLEND IN"
   Follows OS dark/light via CSS system color keywords.
   ══════════════════════════════════════════════════════════ */
html[data-theme="system"] {
  --bg:           Canvas;
  --bg2:          Field;
  --bg3:          ButtonFace;
  --panel:        ButtonFace;
  --panel2:       Canvas;
  --accent1:      #007aff;
  --accent2:      #5856d6;
  --accent3:      #32ade6;
  --accent4:      #30b0c7;
  --accent5:      #af52de;
  --text:         CanvasText;
  --text2:        GrayText;
  --text3:        GrayText;
  --border:       ButtonBorder;
  --border2:      #007aff30;
  --nav-bg:       ButtonFace;
  --nav-border:   ButtonBorder;
  --btn-bg:       #007aff;
  --btn-text:     #ffffff;
  --btn-hover:    #3399ff;
  --tag-bg:       ButtonFace;
  --tag-border:   ButtonBorder;
  --tag-text:     #007aff;
  --card-bg:      Field;
  --card-border:  ButtonBorder;
  --ok:           #34c759;
  --warn:         #ff9500;
  --crit:         #ff3b30;
  --primary:      #34c759;
  --header-bg:    Field;
  --header-text:  CanvasText;
  --glow:         none;
  --glow2:        none;
  --font-display: 'Share Tech Mono', system-ui, sans-serif;
  --font-body:    'Share Tech', system-ui, sans-serif;
  --radius:       10px;
  --radius-sm:    6px;
  --lcars-strip:  #007aff;
}

/* ══════════════════════════════════════════════════════════
   PAPER  —  "OLD SCHOOL TERMINAL"
   Cool light grey, dark ink, neon green primary action.
   ══════════════════════════════════════════════════════════ */
html[data-theme="paper"] {
  --bg:           #d8d8d6;
  --bg2:          #cecece;
  --bg3:          #b8b8b6;
  --panel:        #c4c4c2;
  --panel2:       #c8c8c6;
  --accent1:      #00bb44;
  --accent2:      #888888;
  --accent3:      #666666;
  --accent4:      #444444;
  --accent5:      #aaaaaa;
  --text:         #1c1c1c;
  --text2:        #777777;
  --text3:        #aaaaaa;
  --heading:      #1c1c1c;
  --border:       #bbbbba;
  --border2:      #00bb4430;
  --nav-bg:       #dadad8;
  --nav-border:   #bbbbba;
  --btn-bg:       #00cc44;
  --btn-text:     #000000;
  --btn-hover:    #00ee55;
  --tag-bg:       #c4c4c2;
  --tag-border:   #888888;
  --tag-text:     #1c1c1c;
  --card-bg:      #cecece;
  --card-border:  #bbbbba;
  --ok:           #008833;
  --warn:         #aa4400;
  --crit:         #cc1111;
  --primary:      #00cc44;
  --header-bg:    #dadad8;
  --header-text:  #000000;
  --glow:         0 0 6px #00bb4420, 0 0 12px #00bb4410;
  --glow2:        0 0 4px #88888830;
  --font-display: 'Share Tech Mono', 'Courier New', monospace;
  --font-body:    'Share Tech', 'Courier New', monospace;
  --radius:       4px;
  --radius-sm:    2px;
  --lcars-strip:  #00bb44;
}