/* ============================================================
   theme-tokens.css — Elite OS shared theme system
   ------------------------------------------------------------
   Single source of truth for the THEME_PRESETS / "Gradient
   Vibes" background + orb system, shared between the login
   page (index.html) and the main app (elite-os-final-*.html).

   WHY THIS FILE EXISTS:
   The main app computes each preset's page background and orb
   colors at runtime in JS (_mixHex / _presetPageGradient) from
   the THEME_PRESETS array, then applies them as inline styles.
   The login page never ran that JS and had no concept of
   `themePreset` at all — it only synced `theme` / `accent` /
   `customAccent`. Result: a user on a Gradient Vibes preset
   (e.g. Mermaidcore) saw a completely different, generic
   gradient on the login screen than in the app.

   This file bakes the *exact* output of _mixHex/_presetPageGradient
   for every preset into static CSS, keyed off `data-preset` on
   <body>. Because THEME_PRESETS is static data, precomputing is
   safe — these values will only go stale if THEME_PRESETS itself
   changes, in which case regenerate this file the same way
   (see gen_css.py in the project history / ask Claude).

   USAGE (both index.html and the app):
     <link rel="stylesheet" href="theme-tokens.css">
     document.body.setAttribute('data-preset', savedPresetId);
   That's it — no JS gradient math needed on either page anymore.
   ============================================================ */

/* Custom Wallpaper sizing — shared so a wallpaper set in the app renders
   identically if index.html ever syncs one in (both pages set this same
   class name; see applyCustomWallpaper() in the app and the login page's
   personalization script). The photo itself is painted via inline
   background-image on <body> by JS, not by this file — this just governs
   how it's sized/positioned/repeated. */
body.has-custom-wallpaper {
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Dark Bases — midnight */
body[data-preset="midnight"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #060608, #09090d, #0e0e13) !important;
}

/* Dark Bases — obsidian */
body[data-preset="obsidian"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #000000, #040404, #090909) !important;
}

/* Dark Bases — slate */
body[data-preset="slate"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #0f1117, #12151d, #161a26) !important;
}

/* Dark Bases — forest */
body[data-preset="forest"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #060a08, #080e0b, #0c140f) !important;
}

/* Dark Bases — aurora */
body[data-preset="aurora"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #04060f, #060813, #090d1b) !important;
}

/* Dark Bases — crimson */
body[data-preset="crimson"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #0a0404, #0e0606, #140909) !important;
}

/* Gradient Vibes — gaussian-glow */
body[data-preset="gaussian-glow"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #504867, #506567, #6d6654) !important;
}
body[data-preset="gaussian-glow"] .orb.o1 {
  background: radial-gradient(circle, rgba(168,154,205,0.95), transparent 70%) !important;
  opacity: 0.20 !important;
}
body[data-preset="gaussian-glow"] .orb.o2 {
  background: radial-gradient(circle, rgba(168,230,207,0.75), transparent 70%) !important;
  opacity: 0.16 !important;
}
body[data-preset="gaussian-glow"] .orb.o3 {
  background: radial-gradient(circle, rgba(244,233,155,0.70), transparent 70%) !important;
  opacity: 0.14 !important;
}
body[data-preset="gaussian-glow"] .orb.o4 {
  background: radial-gradient(circle, rgba(168,154,205,0.55), transparent 70%) !important;
  opacity: 0.10 !important;
}

/* Gradient Vibes — ambient-grad */
body[data-preset="ambient-grad"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #504867, #506567, #715d6c) !important;
}
body[data-preset="ambient-grad"] .orb.o1 {
  background: radial-gradient(circle, rgba(168,154,205,0.95), transparent 70%) !important;
  opacity: 0.20 !important;
}
body[data-preset="ambient-grad"] .orb.o2 {
  background: radial-gradient(circle, rgba(168,230,207,0.75), transparent 70%) !important;
  opacity: 0.16 !important;
}
body[data-preset="ambient-grad"] .orb.o3 {
  background: radial-gradient(circle, rgba(255,209,220,0.70), transparent 70%) !important;
  opacity: 0.14 !important;
}
body[data-preset="ambient-grad"] .orb.o4 {
  background: radial-gradient(circle, rgba(168,154,205,0.55), transparent 70%) !important;
  opacity: 0.10 !important;
}

/* Gradient Vibes — chilled-grad */
body[data-preset="chilled-grad"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #003843, #004f38, #46660b) !important;
}
body[data-preset="chilled-grad"] .orb.o1 {
  background: radial-gradient(circle, rgba(0,105,148,0.95), transparent 70%) !important;
  opacity: 0.20 !important;
}
body[data-preset="chilled-grad"] .orb.o2 {
  background: radial-gradient(circle, rgba(0,166,118,0.75), transparent 70%) !important;
  opacity: 0.16 !important;
}
body[data-preset="chilled-grad"] .orb.o3 {
  background: radial-gradient(circle, rgba(183,227,0,0.70), transparent 70%) !important;
  opacity: 0.14 !important;
}
body[data-preset="chilled-grad"] .orb.o4 {
  background: radial-gradient(circle, rgba(0,105,148,0.55), transparent 70%) !important;
  opacity: 0.10 !important;
}

/* Gradient Vibes — plum-persimmon */
body[data-preset="plum-persimmon"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #381057, #713041, #2c0e52) !important;
}
body[data-preset="plum-persimmon"] .orb.o1 {
  background: radial-gradient(circle, rgba(106,27,154,0.95), transparent 70%) !important;
  opacity: 0.20 !important;
}
body[data-preset="plum-persimmon"] .orb.o2 {
  background: radial-gradient(circle, rgba(255,111,97,0.75), transparent 70%) !important;
  opacity: 0.16 !important;
}
body[data-preset="plum-persimmon"] .orb.o3 {
  background: radial-gradient(circle, rgba(74,20,140,0.70), transparent 70%) !important;
  opacity: 0.14 !important;
}
body[data-preset="plum-persimmon"] .orb.o4 {
  background: radial-gradient(circle, rgba(106,27,154,0.55), transparent 70%) !important;
  opacity: 0.10 !important;
}

/* Gradient Vibes — earthy-harmony */
body[data-preset="earthy-harmony"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #663829, #544939, #2d2016) !important;
}
body[data-preset="earthy-harmony"] .orb.o1 {
  background: radial-gradient(circle, rgba(226,125,96,0.95), transparent 70%) !important;
  opacity: 0.20 !important;
}
body[data-preset="earthy-harmony"] .orb.o2 {
  background: radial-gradient(circle, rgba(178,172,136,0.75), transparent 70%) !important;
  opacity: 0.16 !important;
}
body[data-preset="earthy-harmony"] .orb.o3 {
  background: radial-gradient(circle, rgba(77,62,44,0.70), transparent 70%) !important;
  opacity: 0.14 !important;
}
body[data-preset="earthy-harmony"] .orb.o4 {
  background: radial-gradient(circle, rgba(226,125,96,0.55), transparent 70%) !important;
  opacity: 0.10 !important;
}

/* Gradient Vibes — earthy-thermal */
body[data-preset="earthy-thermal"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #612400, #092218) !important;
}
body[data-preset="earthy-thermal"] .orb.o1 {
  background: radial-gradient(circle, rgba(230,81,0,0.95), transparent 70%) !important;
  opacity: 0.20 !important;
}
body[data-preset="earthy-thermal"] .orb.o2 {
  background: radial-gradient(circle, rgba(138,74,0,0.75), transparent 70%) !important;
  opacity: 0.16 !important;
}
body[data-preset="earthy-thermal"] .orb.o3 {
  background: radial-gradient(circle, rgba(0,77,64,0.70), transparent 70%) !important;
  opacity: 0.14 !important;
}
body[data-preset="earthy-thermal"] .orb.o4 {
  background: radial-gradient(circle, rgba(230,81,0,0.55), transparent 70%) !important;
  opacity: 0.10 !important;
}

/* Gradient Vibes — mermaidcore */
body[data-preset="mermaidcore"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #35234e, #2f3769, #085551) !important;
}
body[data-preset="mermaidcore"] .orb.o1 {
  background: radial-gradient(circle, rgba(118,75,162,0.95), transparent 70%) !important;
  opacity: 0.20 !important;
}
body[data-preset="mermaidcore"] .orb.o2 {
  background: radial-gradient(circle, rgba(102,126,234,0.75), transparent 70%) !important;
  opacity: 0.16 !important;
}
body[data-preset="mermaidcore"] .orb.o3 {
  background: radial-gradient(circle, rgba(0,205,172,0.70), transparent 70%) !important;
  opacity: 0.14 !important;
}
body[data-preset="mermaidcore"] .orb.o4 {
  background: radial-gradient(circle, rgba(118,75,162,0.55), transparent 70%) !important;
  opacity: 0.10 !important;
}

/* Gradient Vibes — sky-cyber */
body[data-preset="sky-cyber"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #005571, #160a4e) !important;
}
body[data-preset="sky-cyber"] .orb.o1 {
  background: radial-gradient(circle, rgba(0,210,255,0.95), transparent 70%) !important;
  opacity: 0.20 !important;
}
body[data-preset="sky-cyber"] .orb.o2 {
  background: radial-gradient(circle, rgba(26,79,212,0.75), transparent 70%) !important;
  opacity: 0.16 !important;
}
body[data-preset="sky-cyber"] .orb.o3 {
  background: radial-gradient(circle, rgba(58,12,163,0.70), transparent 70%) !important;
  opacity: 0.14 !important;
}
body[data-preset="sky-cyber"] .orb.o4 {
  background: radial-gradient(circle, rgba(0,210,255,0.55), transparent 70%) !important;
  opacity: 0.10 !important;
}

/* Dashboard — nexus-dark */
body[data-preset="nexus-dark"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #050b12, #07131d, #035e6c) !important;
}
body[data-preset="nexus-dark"] .orb.o1 {
  background: radial-gradient(circle, rgba(0,229,255,0.95), transparent 70%) !important;
  opacity: 0.20 !important;
}
body[data-preset="nexus-dark"] .orb.o2 {
  background: radial-gradient(circle, rgba(0,150,180,0.75), transparent 70%) !important;
  opacity: 0.16 !important;
}
body[data-preset="nexus-dark"] .orb.o3 {
  background: radial-gradient(circle, rgba(10,30,60,0.70), transparent 70%) !important;
  opacity: 0.14 !important;
}
body[data-preset="nexus-dark"] .orb.o4 {
  background: radial-gradient(circle, rgba(0,229,255,0.55), transparent 70%) !important;
  opacity: 0.10 !important;
}

/* Dashboard — purple-ripple */
body[data-preset="purple-ripple"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #190035, #310d50, #513270) !important;
}
body[data-preset="purple-ripple"] .orb.o1 {
  background: radial-gradient(circle, rgba(109,40,217,0.95), transparent 70%) !important;
  opacity: 0.20 !important;
}
body[data-preset="purple-ripple"] .orb.o2 {
  background: radial-gradient(circle, rgba(168,85,247,0.75), transparent 70%) !important;
  opacity: 0.16 !important;
}
body[data-preset="purple-ripple"] .orb.o3 {
  background: radial-gradient(circle, rgba(192,132,252,0.70), transparent 70%) !important;
  opacity: 0.14 !important;
}
body[data-preset="purple-ripple"] .orb.o4 {
  background: radial-gradient(circle, rgba(109,40,217,0.55), transparent 70%) !important;
  opacity: 0.10 !important;
}

/* Light — alpinist */
body[data-preset="alpinist"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #eaedf1, #f5f6f8, #f8fafc) !important;
}

/* Light — sylphora */
body[data-preset="sylphora"]:not(.has-custom-wallpaper) {
  background: linear-gradient(135deg, #dcf5f1, #edfaf8, #f8fdfc) !important;
}