/* Site themes + the light/dark/system switch.
   - The owner picks the site theme in /dashboard (content/site.json -> theme): sky, blue or slate.
   - Each visitor can override it with the glass switch (theme.js): light = sky, dark = the owner's
     dark theme (blue unless slate is chosen), system = follows the device.
   - theme.js and the inline <head> snippet set html[data-theme]. Each page's :root is only a fallback. */

/* SKY — light: white + sky blue, warm orange from the logo */
html[data-theme="sky"]{
  --bg:#FFFFFF; --bg-2:#F2F8FE; --b:255,255,255; --b2:242,248,254; --tint:#EAF5FE;
  --card:#FFFFFF; --card-hi:#F7FBFF; --surface:#FFFFFF;
  --text:#0F1B2D; --muted:#5B6B80; --soft:#33465C;
  --blue:#1683D8; --blue-2:#1683D8; --a:22,131,216; --a2:93,183,245; --ln:15,27,45;
  --line:rgba(15,27,45,.09); --glow:rgba(22,131,216,.28);
  --grad:linear-gradient(135deg,#1683D8 0%,#4FB3F6 100%);
  --warm:#F7931E; --warm-2:#FFB25E; --shadow:0 21px 55px rgba(15,27,45,.08);
  --ok:#1FA971; --err:#E5484D; --warn:#B7791F; --on-accent:#fff;
  color-scheme:light;
}
html[data-theme="sky"] body{background-image:none}
html[data-theme="sky"] .chip input:checked + span{color:var(--text)}
html[data-theme="sky"] .btn.ghost{color:var(--text)}

/* BLUE — the original dark navy look */
html[data-theme="blue"]{
  --bg:#060A18; --bg-2:#0B1226; --b:6,10,24; --b2:11,18,38; --tint:rgba(47,123,255,.14);
  --card:rgba(255,255,255,.04); --card-hi:rgba(255,255,255,.07); --surface:#0E1630;
  --text:#EEF2FF; --muted:#8C96B3; --soft:#c3cbe6;
  --blue:#2F7BFF; --blue-2:#5AB0FF; --a:47,123,255; --a2:90,176,255; --ln:140,170,255;
  --line:rgba(140,170,255,.14); --glow:rgba(47,123,255,.45);
  --grad:linear-gradient(135deg,#1E5BFF 0%,#3C9BFF 100%);
  --warm:#F7941F; --warm-2:#FFB25E; --shadow:0 21px 55px rgba(0,0,0,.35);
  --ok:#3DDC97; --err:#FF6B7A; --warn:#FFC857; --on-accent:#fff;
  color-scheme:dark;
}

/* SLATE — dark grey with violet and coral */
html[data-theme="slate"]{
  --bg:#262A33; --bg-2:#2F343F; --b:38,42,51; --b2:47,52,63; --tint:rgba(91,75,196,.18);
  --card:rgba(255,255,255,.06); --card-hi:rgba(255,255,255,.1); --surface:#2F343F;
  --text:#F5F6F8; --muted:#A3A8B5; --soft:#D5D8DF;
  --blue:#5B4BC4; --blue-2:#F0958B; --a:91,75,196; --a2:240,149,139; --ln:255,255,255;
  --line:rgba(255,255,255,.12); --glow:rgba(91,75,196,.45);
  --grad:linear-gradient(135deg,#4B3BB0 0%,#6A58D6 100%);
  --warm:#F0958B; --warm-2:#F7B7A3; --shadow:0 21px 55px rgba(0,0,0,.3);
  --ok:#3DDC97; --err:#FF6B7A; --warn:#FFC857; --on-accent:#fff;
  color-scheme:dark;
}
html[data-theme="slate"] h1 em{background:linear-gradient(135deg,#F0958B,#F7B7A3);-webkit-background-clip:text;background-clip:text;filter:none}
html[data-theme="slate"] .card.feature .num{background:#B5D96A;color:#262A33;box-shadow:none}
html[data-theme="slate"] .ticker span::before{background:#B5D96A;box-shadow:none}

/* Dashboard in the light theme: replace the few colours it hard-codes for dark */
html[data-theme="sky"][data-app="dash"] .chip.on,
html[data-theme="sky"][data-app="dash"] .seg button.on,
html[data-theme="sky"][data-app="dash"] .tab.on{color:var(--blue)}
html[data-theme="sky"][data-app="dash"] .savebar{background:rgba(255,255,255,.97);box-shadow:0 12px 30px rgba(15,27,45,.15)}
html[data-theme="sky"][data-app="dash"] .savebar .tx b{color:var(--text)}
html[data-theme="sky"][data-app="dash"] .warn{color:#7A5212}
html[data-theme="sky"][data-app="dash"] .toast{background:#0F1B2D}
html[data-theme="sky"][data-app="dash"] .toast:not(.show){box-shadow:none}
html[data-theme="sky"][data-app="dash"] .dim{background:rgba(15,27,45,.35)}
html[data-theme="sky"][data-app="dash"] .big .n{color:var(--text)}
html[data-theme="sky"][data-app="dash"] .s-pending{border-color:rgba(183,121,31,.5)}

/* ---------- Light / dark / system glass switch (built by theme.js) ---------- */
.mode-switch{--ms:30px;position:relative;display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;flex:none;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.18));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -1px 0 rgba(15,27,45,.06),0 6px 20px rgba(15,27,45,.10);
  backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%)}
html[data-theme="blue"] .mode-switch,html[data-theme="slate"] .mode-switch{
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 20px rgba(0,0,0,.35)}
.mode-switch button{position:relative;z-index:1;width:var(--ms);height:var(--ms);border:0;border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:color .25s}
.mode-switch button svg{width:16px;height:16px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.mode-switch button:hover{color:var(--text)}
.mode-switch button[aria-checked="true"]{color:var(--blue)}
.mode-switch button[aria-checked="true"] svg{transform:rotate(-20deg) scale(1.12)}
.mode-switch button[data-m="dark"][aria-checked="true"] svg{transform:rotate(20deg) scale(1.12)}
.mode-switch button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.mode-switch .thumb{position:absolute;top:3px;inset-inline-start:3px;width:var(--ms);height:var(--ms);border-radius:50%;z-index:0;
  background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(255,255,255,.55));
  box-shadow:inset 0 1px 0 #fff,0 3px 10px rgba(15,27,45,.16);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
html[data-theme="blue"] .mode-switch .thumb,html[data-theme="slate"] .mode-switch .thumb{
  background:linear-gradient(145deg,rgba(255,255,255,.26),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 3px 10px rgba(0,0,0,.4)}
html[data-theme="blue"] .mode-switch button[aria-checked="true"],html[data-theme="slate"] .mode-switch button[aria-checked="true"]{color:#fff}
.mode-switch.floating{position:fixed;bottom:21px;inset-inline-start:21px;z-index:70}
/* Small screens: show the active icon only; tap to open the other two */
@media (max-width:600px){
  .mode-switch:not(.open) button[aria-checked="false"]{display:none}
  .mode-switch:not(.open) .thumb{transform:none!important}
}

/* Circle reveal when the theme changes (View Transitions API; browsers without it just switch) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){
  .mode-switch .thumb,.mode-switch button svg{transition:none}
}

/* Site font, chosen by the owner in /dashboard (content/site.json "font"). The <head> snippet loads its stylesheet. */
html{--font:"Thmanyah Sans","Readex Pro",system-ui,sans-serif}
html[data-font="readex"]{--font:"Readex Pro",system-ui,sans-serif}
html[data-font="tajawal"]{--font:"Tajawal",system-ui,sans-serif}