/* ==========================================================================
   W.D.D colour palette: the variables behind every theme (data-theme), light
   mode (data-mode) and the brightness slider (--shade / --tint), set by
   public/js/theme.js. Loaded before wdd.css by the app, and on its own by
   pages outside the desktop (the manual) so they follow the same look.
   ========================================================================== */
:root {
  --acc: #3de8ff;          /* primary holo cyan */
  --acc-rgb: 61, 232, 255;
  --acc2: #ffb547;         /* warning amber */
  --acc2-rgb: 255, 181, 71;
  --ok: #7dff9a;
  --danger: #ff4d6d;
  --bg: #020812;
  --bg2: #06131f;
  --panel: rgba(6, 22, 36, 0.66);
  --panel-solid: #071a2a;
  --line: rgba(var(--acc-rgb), 0.32);
  --line-strong: rgba(var(--acc-rgb), 0.7);
  --glow: 0 0 12px rgba(var(--acc-rgb), 0.45), 0 0 32px rgba(var(--acc-rgb), 0.15);
  --text: #d6f6ff;
  --text-dim: rgba(214, 246, 255, 0.6);
  --text-faint: rgba(214, 246, 255, 0.35);
  --f-display: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --f-body: 'Rajdhani', system-ui, sans-serif;
  --f-mono: 'Share Tech Mono', ui-monospace, monospace;
  --topbar-h: 46px;
  --dock-h: 54px;
  /* surfaces (light mode overrides these) */
  --bar-bg: linear-gradient(180deg, rgba(2, 10, 18, .92), rgba(2, 10, 18, .55));   /* top bar */
  --dock-bg: linear-gradient(0deg, rgba(2, 10, 18, .92), rgba(2, 10, 18, .55));    /* dock */
  --panel-win: rgba(5, 18, 30, .84);                                               /* window body */
  --input-bg: rgba(0, 10, 20, .55);                                                /* inputs */
  --well: rgba(0, 0, 0, .35);                                                      /* recessed boxes: logs, code, raw data */
  --ink: rgba(0, 0, 0, .2);                                                        /* light tint over content */
  --nav-bg: rgba(0, 0, 0, .15);                                                    /* a widget's left column (nav, source, job list): darker than its main pane */
  --scrim: rgba(0, 4, 10, .6);                                                     /* modal backdrop */
  --win-shadow: 0 18px 50px rgba(0, 0, 0, .6);
  --label-shadow: 0 1px 3px #000, 0 0 8px rgba(0, 0, 0, .8);
  --hud-vignette: rgba(0, 0, 0, .65);
  --scanline: rgba(0, 0, 0, .18);
  --fw: 500;                                                                       /* base text weight (Settings › Appearance › Text weight) */
  --glass: 50%;                                                                     /* window transparency (Settings › Appearance › Window transparency) */
  --shade: 0%; --tint: 24%;                                                        /* light-mode brightness: 70 of 100 (Settings › Appearance › Brightness) */
  color-scheme: dark;
}
:root[data-theme='mark42'] { --acc: #ffc24a; --acc-rgb: 255, 194, 74; --acc2: #ff5a3c; --acc2-rgb: 255, 90, 60; --text: #fff2d6; --text-dim: rgba(255,242,214,.6); --text-faint: rgba(255,242,214,.35); --bg: #0c0602; --bg2: #1a0d05; --panel: rgba(28,14,4,.68); --panel-solid: #1c0f06; }
:root[data-theme='friday'] { --acc: #ff5cd6; --acc-rgb: 255, 92, 214; --acc2: #5cf0ff; --acc2-rgb: 92, 240, 255; --text: #ffe3f7; --text-dim: rgba(255,227,247,.6); --text-faint: rgba(255,227,247,.35); --bg: #0b0210; --bg2: #16061e; --panel: rgba(24,6,30,.68); --panel-solid: #1a0822; }
:root[data-theme='stealth'] { --acc: #e6f1f5; --acc-rgb: 230, 241, 245; --acc2: #7fd4ff; --acc2-rgb: 127, 212, 255; --text: #eef6f9; --bg: #050607; --bg2: #0d1012; --panel: rgba(16,20,24,.72); --panel-solid: #111518; }
:root[data-theme='lab'] {
  /* Lab: blue accent, neutral greys, no glow, plain display font. Light by default (theme.js), dark here. */
  --acc: #4da3ff; --acc-rgb: 77, 163, 255; --acc2: #f59e0b; --acc2-rgb: 245, 158, 11;
  --bg: #0e1319; --bg2: #161d26; --panel: rgba(22, 29, 38, .8); --panel-solid: #161d26; --panel-win: rgba(20, 27, 36, .94);
  --line: rgba(190, 210, 235, .16); --line-strong: rgba(77, 163, 255, .6); --glow: none;
  --text: #e6edf3; --text-dim: rgba(230, 237, 243, .66); --text-faint: rgba(230, 237, 243, .4);
  --f-display: 'Rajdhani', system-ui, sans-serif;
  --bar-bg: rgba(14, 19, 25, .94); --dock-bg: rgba(14, 19, 25, .96); --input-bg: rgba(0, 0, 0, .3); --well: rgba(0, 0, 0, .3); --ink: rgba(255, 255, 255, .04);
  --label-shadow: none; --win-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
:root[data-theme='mango'] {
  /* Mango: Apple's greys and whites. System font stack (SF Pro on Apple devices), blue accent, no glow. */
  --acc: #0a84ff; --acc-rgb: 10, 132, 255; --acc2: #ff9f0a; --acc2-rgb: 255, 159, 10; --ok: #30d158; --danger: #ff453a;
  --bg: #1c1c1e; --bg2: #2c2c2e; --panel: rgba(44, 44, 46, .88); --panel-solid: #2c2c2e; --panel-win: rgba(40, 40, 42, .94);
  --line: rgba(255, 255, 255, .12); --line-strong: rgba(10, 132, 255, .6); --glow: none;
  --text: #f5f5f7; --text-dim: rgba(245, 245, 247, .62); --text-faint: rgba(245, 245, 247, .42);
  --f-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --f-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --f-mono: 'SF Mono', ui-monospace, Menlo, Monaco, Consolas, monospace;
  --bar-bg: rgba(28, 28, 30, .92); --dock-bg: rgba(28, 28, 30, .94); --input-bg: rgba(0, 0, 0, .25); --well: rgba(0, 0, 0, .28); --ink: rgba(255, 255, 255, .05); --nav-bg: rgba(0, 0, 0, .18);
  --label-shadow: none; --win-shadow: 0 16px 44px rgba(0, 0, 0, .55);
}
:root[data-theme='galvanator'] {
  /* Galvanator 01: a Danish living room in 2037. Charcoal and walnut surfaces, ivory text, Inter, no glow; amber
     is the one accent and means "this matters", fog blue is the quiet second colour. Its window style is in wdd.css. */
  --acc: #c68b52; --acc-rgb: 198, 139, 82; --acc2: #9cb4bd; --acc2-rgb: 156, 180, 189; --ok: #8fae8b; --danger: #c4574a;
  --bg: #171817; --bg2: #1f1b17; --panel: rgba(31, 26, 22, .8); --panel-solid: #1f1a16; --panel-win: rgba(27, 23, 20, .9);
  --line: rgba(232, 228, 218, .12); --line-strong: rgba(198, 139, 82, .55); --glow: none;
  --text: #e8e4da; --text-dim: rgba(232, 228, 218, .64); --text-faint: rgba(232, 228, 218, .4);
  --f-display: 'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --f-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --bar-bg: color-mix(in srgb, var(--panel-win), transparent var(--glass)); --dock-bg: color-mix(in srgb, var(--panel-win), transparent calc(var(--glass) * .8)); --input-bg: rgba(0, 0, 0, .25); --well: rgba(0, 0, 0, .25); --ink: rgba(232, 228, 218, .04); --nav-bg: rgba(0, 0, 0, .16);
  --scrim: rgba(10, 9, 8, .55); --label-shadow: 0 1px 3px rgba(0, 0, 0, .6); --win-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .3);
}
:root[data-theme='ultron'] { --acc: #ff3b3b; --acc-rgb: 255, 59, 59; --acc2: #ffd23b; --acc2-rgb: 255, 210, 59; --text: #ffe0e0; --text-dim: rgba(255,224,224,.6); --text-faint: rgba(255,224,224,.35); --bg: #0d0203; --bg2: #1a0507; --panel: rgba(30,6,8,.7); --panel-solid: #1c0709; }

/* ---- Light mode (Settings › Appearance › Mode): the same accent families on
   soft off-white surfaces with slate text, not pure white on black, so the
   contrast stays comfortable. Accents are darkened so they still read on
   the light surfaces, and every glow, text-shadow and filter is turned off. ---- */
:root[data-mode='light'] {
  --ok: #15803d; --danger: #dc2626;
  /* Base surfaces per theme (--l-bg page, --l-bg2 panels), pushed darker by --shade or lighter by --tint (the Brightness slider). */
  --l-bg: #e4e9ef; --l-bg2: #eef1f5;
  --lbg: color-mix(in srgb, color-mix(in srgb, var(--l-bg), #141c26 var(--shade)), #fff var(--tint));
  --lbg2: color-mix(in srgb, color-mix(in srgb, var(--l-bg2), #141c26 var(--shade)), #fff var(--tint));
  --bg: var(--lbg); --bg2: var(--lbg2); --panel-solid: var(--lbg2);
  --panel: color-mix(in srgb, var(--lbg2) 88%, transparent); --panel-win: color-mix(in srgb, var(--lbg2) 96%, transparent);
  --bar-bg: color-mix(in srgb, color-mix(in srgb, var(--lbg), var(--lbg2)) 94%, transparent); --dock-bg: color-mix(in srgb, color-mix(in srgb, var(--lbg), var(--lbg2)) 96%, transparent);
  --input-bg: color-mix(in srgb, var(--lbg2), #fff 50%); --hud-vignette: color-mix(in srgb, var(--lbg) 55%, transparent);
  --line: rgba(30, 45, 65, .2); --line-strong: rgba(var(--acc-rgb), .5); --glow: none;
  --text: #253542; --text-dim: rgba(37, 53, 66, .74); --text-faint: rgba(37, 53, 66, .55);
  --well: rgba(30, 45, 65, .07); --ink: rgba(30, 45, 65, .06); --nav-bg: rgba(30, 45, 65, .12); --scrim: rgba(30, 40, 50, .35);
  --win-shadow: 0 12px 30px rgba(30, 45, 65, .16); --label-shadow: none; --scanline: rgba(0, 0, 0, .05);
  color-scheme: light;
}
:root[data-mode='light']:not([data-theme]) { --acc: #0a7fa3; --acc-rgb: 10, 127, 163; --acc2: #b45309; --acc2-rgb: 180, 83, 9; --l-bg: #dfe9ee; --l-bg2: #ecf2f5; --text: #1b323d; --text-dim: rgba(27, 50, 61, .7); --text-faint: rgba(27, 50, 61, .48); }
:root[data-mode='light'][data-theme='mark42'] { --acc: #b36a00; --acc-rgb: 179, 106, 0; --acc2: #c2410c; --acc2-rgb: 194, 65, 12; --l-bg: #ede6da; --l-bg2: #f5f0e7; --text: #3a2b17; --text-dim: rgba(58, 43, 23, .7); --text-faint: rgba(58, 43, 23, .48); }
:root[data-mode='light'][data-theme='friday'] { --acc: #c0189a; --acc-rgb: 192, 24, 154; --acc2: #0a7fa3; --acc2-rgb: 10, 127, 163; --l-bg: #ece2e9; --l-bg2: #f5edf2; --text: #3a2034; --text-dim: rgba(58, 32, 52, .7); --text-faint: rgba(58, 32, 52, .48); }
:root[data-mode='light'][data-theme='ultron'] { --acc: #c81e1e; --acc-rgb: 200, 30, 30; --acc2: #a16207; --acc2-rgb: 161, 98, 7; --l-bg: #ece2e2; --l-bg2: #f5eded; --text: #3a1e20; --text-dim: rgba(58, 30, 32, .7); --text-faint: rgba(58, 30, 32, .48); }
:root[data-mode='light'][data-theme='stealth'] { --acc: #2b3a44; --acc-rgb: 43, 58, 68; --acc2: #0369a1; --acc2-rgb: 3, 105, 161; --l-bg: #e3e7ea; --l-bg2: #eef1f3; --text: #222c33; --text-dim: rgba(34, 44, 51, .76); --text-faint: rgba(34, 44, 51, .56); }
:root[data-mode='light'][data-theme='mango'] { --acc: #0071e3; --acc-rgb: 0, 113, 227; --acc2: #c93400; --acc2-rgb: 201, 52, 0; --ok: #1f8a3d; --danger: #d70015; --l-bg: #f5f5f7; --l-bg2: #ffffff; --text: #1d1d1f; --text-dim: rgba(29, 29, 31, .66); --text-faint: rgba(29, 29, 31, .46); --line: rgba(0, 0, 0, .1); --line-strong: rgba(0, 113, 227, .5); --nav-bg: rgba(0, 0, 0, .06); --well: rgba(0, 0, 0, .04); --ink: rgba(0, 0, 0, .035); --win-shadow: 0 12px 36px rgba(0, 0, 0, .14); }
:root[data-mode='light'][data-theme='lab'] { --acc: #0b6bcb; --acc-rgb: 11, 107, 203; --acc2: #c2410c; --acc2-rgb: 194, 65, 12; --text: #253542; --text-dim: rgba(37, 53, 66, .7); --text-faint: rgba(37, 53, 66, .48); --line: rgba(30, 45, 65, .2); }
:root[data-mode='light'][data-theme='galvanator'] { --acc: #8f5a24; --acc-rgb: 143, 90, 36; --acc2: #3f6470; --acc2-rgb: 63, 100, 112; --ok: #4e7a4a; --danger: #a8392c; --l-bg: #e8e4da; --l-bg2: #f2efe8; --text: #171817; --text-dim: rgba(23, 24, 23, .7); --text-faint: rgba(23, 24, 23, .5); --line: rgba(48, 38, 31, .16); --line-strong: rgba(143, 90, 36, .5); --nav-bg: rgba(48, 38, 31, .07); --well: rgba(48, 38, 31, .05); --ink: rgba(48, 38, 31, .04); --win-shadow: 0 18px 44px rgba(48, 38, 31, .16); }

/* Luna (Settings › Appearance › Colours, and the Windows XP theme): the palette; its chrome is in wdd.css. */
:root[data-theme='luna']:not([data-mode='light']) {
  /* dark mode: the same chrome over navy windows (light mode's surfaces come from the light rules and the block below) */
  --acc: #3d8bff; --acc-rgb: 61, 139, 255; --acc2: #f39c34; --acc2-rgb: 243, 156, 52; --ok: #3ccf4e; --danger: #ff5a3c;
  --bg: #16233a; --bg2: #1e2f4d; --panel: rgba(30, 47, 77, .92); --panel-solid: #1e2f4d; --panel-win: rgba(28, 42, 68, .97);
  --line: rgba(160, 190, 240, .22); --line-strong: rgba(61, 139, 255, .65);
  --text: #eef3fb; --text-dim: rgba(238, 243, 251, .68); --text-faint: rgba(238, 243, 251, .45);
}
:root[data-theme='luna'] {
  --glow: none;
  --f-display: 'Trebuchet MS', Tahoma, Verdana, sans-serif;
  --f-body: Tahoma, Verdana, 'Segoe UI', sans-serif;
  --f-mono: 'Lucida Console', Consolas, ui-monospace, monospace;
  --label-shadow: 1px 1px 1px #000, 0 0 3px rgba(0, 0, 0, .6); --win-shadow: 3px 4px 10px rgba(0, 0, 0, .45);
  /* the chrome */
  --xp-bar: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7 100%);
  --xp-bar-off: linear-gradient(180deg, #7697e7 0%, #7e9ee3 10%, #94afe8 40%, #97b4e9 88%, #82a5e4 95%, #7c9fe2 100%);
  --xp-frame: #0842d6; --xp-frame-off: #7a96df;
  --xp-task: linear-gradient(180deg, #1f2f86 0%, #3165c4 3%, #3682e5 6%, #4490e6 10%, #3883e5 12%, #2b71e0 15%, #2663da 18%, #235bd6 20%, #2258d5 23%, #2157d6 38%, #245ddb 54%, #2562df 86%, #245fdc 89%, #2158d4 92%, #1d4ec0 95%, #1941a5 98%);
  --xp-tray: linear-gradient(180deg, #0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%, #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9 100%);
  --xp-start: radial-gradient(90% 70% at 30% 0%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #5cbf55 0%, #42a63f 14%, #389a37 45%, #2f8a2f 75%, #26782a 92%, #1d6a22 100%);
}
:root[data-mode='light'][data-theme='luna'] {
  --acc: #0a53e4; --acc-rgb: 10, 83, 228; --acc2: #e8730c; --acc2-rgb: 232, 115, 12; --ok: #1e8e1e; --danger: #d6321b;
  --l-bg: #e3dfcb; --l-bg2: #ece9d8; --panel-win: var(--lbg2); --text: #111; --text-dim: rgba(0, 0, 0, .66); --text-faint: rgba(0, 0, 0, .46);
  --line: #aca899; --line-strong: #7f9db9; --input-bg: #fff; --well: #fff; --ink: rgba(0, 0, 0, .03); --nav-bg: rgba(110, 100, 60, .07);
  --label-shadow: 1px 1px 1px #000, 0 0 3px rgba(0, 0, 0, .6); --win-shadow: 3px 4px 10px rgba(0, 0, 0, .35);
}