/* PassiveHub — Glass Theme · Single source of truth
   ════════════════════════════════════════════════════════════════════
   HOW THIS PROJECT'S STYLING WORKS  (read this before editing anything)
   ════════════════════════════════════════════════════════════════════
   
   This file holds every color, font, border, radius, and effect the app
   uses. Change a value here and it should propagate everywhere. If you
   find yourself hardcoding a hex, rgba, or font string anywhere else,
   stop — add a token here instead, then reference it.
   
   ─── Where things live ─────────────────────────────────────────────
   
   theme.css (this file) — all design tokens as CSS variables.
   
   index.html / pipeline.html / imageforge.html — React apps. Each has
     a `C` object (colors) and `F` object (fonts) near the top that
     reads from this file via `_v('--xxx') || fallback`. Use those:
       background: C.bg, fontFamily: F.sans, border: '1px solid '+C.border
     Never hardcode hex/rgba/font strings in these files. If C is
     missing a value, add the token here first, then add it to C.
   
   titleengine.html / scriptengine.html / islamicengine.html /
   seoengine.html / thumbworkshop.html / sync.html / costs.html —
     iframe tools with plain <style> blocks (no React, no C object).
     Use var(--xxx) directly. Token names available are listed in the
     "Aliases" section below — those names exist specifically so iframe
     CSS reads naturally (e.g. var(--surface), var(--card), var(--sans)).
   
   ─── How to change the look ────────────────────────────────────────
   
   Want a different background mood? Uncomment one of the mesh presets
     at the top, or change `applyMeshPreset` in index.html (also writes
     to backend so all team members see it).
   
   Want to swap the accent color? Edit --accent and --accent-bg below.
   
   Want different fonts? Edit --font-sans and --font-mono. The aliases
     --sans and --mono will follow automatically.
   
   Want a new color used in many places? Add a token in the right
     section below, then either reference it via C in React or
     var(--xxx) in iframe CSS.
   
   ─── What NOT to touch ─────────────────────────────────────────────
   
   The mesh changer (`applyMeshPreset` in index.html). It writes the
     gradient string directly to body.style + iterates all iframes.
     Looks ugly, works on mobile Edge precisely because it bypasses
     pure-var rendering. Leave it alone unless mesh changing breaks.
   
   Per-tool identity accent colors — ScriptEngine yellow, IslamicEngine
     green, ThumbWorkshop pink, TitleEngine purple, SEOEngine purple.
     These define each tool's visual identity, not the global theme.
     They live as local :root overrides inside each iframe and should
     not be tokenized into theme.css.
   
   Channel color arrays (CH_DEFAULT_COLORS in index.html and
     pipeline.html) — these are data, not theme.
   
   ─── Mobile Edge gotchas ───────────────────────────────────────────
   
   No nested var() chains (var(--x, var(--y))). Mobile Edge fails on
     these. The fallback pattern `_v('--x') || 'literal'` in JS is fine
     because the fallback is a literal, not another var().
   
   Background repaints from var() changes can fail on mobile Edge.
     That's why applyMeshPreset writes the full gradient string to
     body.style instead of relying on body{background:...} reading
     updated --m1..--m4 vars. Don't "fix" this.
   
   ════════════════════════════════════════════════════════════════════
   MESH MOOD PRESETS  (uncomment one to change background mood)
   ════════════════════════════════════════════════════════════════════ */

/* 🟣 Purple/Indigo (current) */
:root { --m1:99,102,241; --m2:168,85,247; --m3:6,182,212; --m4:236,72,153; }

/* 🩷 Pink/Rose — uncomment to use:
:root { --m1:236,72,153; --m2:244,114,182; --m3:168,85,247; --m4:251,113,133; } */

/* 🔵 Ocean/Blue — uncomment to use:
:root { --m1:59,130,246; --m2:6,182,212; --m3:99,102,241; --m4:56,189,248; } */

/* 🟢 Emerald — uncomment to use:
:root { --m1:16,185,129; --m2:74,222,128; --m3:6,182,212; --m4:52,211,153; } */

/* 🟠 Amber/Warm — uncomment to use:
:root { --m1:245,158,11; --m2:251,191,36; --m3:236,72,153; --m4:239,68,68; } */

/* 🔴 Red/Crimson — uncomment to use:
:root { --m1:239,68,68; --m2:236,72,153; --m3:168,85,247; --m4:248,113,113; } */

/* ═══ Core design tokens ═══ */
:root {
  /* Backgrounds & Surfaces */
  --bg:#06060e;--bg2:rgba(255,255,255,.025);
  --sf:rgba(255,255,255,.035);--sf-alt:rgba(255,255,255,.055);--sf3:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.08);--border-h:rgba(255,255,255,.18);

  /* Brand */
  --accent:#818cf8;--accent-bg:rgba(129,140,248,.10);--accent2:#c4b5fd;

  /* Text */
  --text:#eef0f8;--text-2:#9498b5;--text-3:#5e6280;--white:#f0f0f8;

  /* Semantic */
  --green:#4ade80;--green-bg:rgba(74,222,128,.10);
  --amber:#fbbf24;--amber-bg:rgba(251,191,36,.10);
  --red:#f87171;--red-bg:rgba(248,113,133,.08);
  --cyan:#67e8f9;--danger:#f87171;
  --orange:#f97316;--gold:#fbbf24;--goldDim:rgba(251,191,36,.1);

  /* Fonts */
  --font-sans:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  /* Glass */
  --glass-blur:blur(20px) saturate(150%);
  --glass-shadow:0 8px 32px rgba(0,0,0,0.2);

  /* Component tokens */
  --radius:12px;--radius-sm:10px;--radius-lg:16px;
  --spinner-track:rgba(255,255,255,.14);
  --spinner-speed:.7s;
  --progress-h:5px;
  --progress-bg:rgba(128,128,128,.1);

  /* ── Aliases (iframe tools use these names) — direct values, no nested var() ── */
  --surface:rgba(255,255,255,.035);--surfaceAlt:rgba(255,255,255,.055);
  --card:rgba(255,255,255,.055);--card2:rgba(255,255,255,.08);
  --border2:rgba(255,255,255,.18);--borderLight:rgba(255,255,255,.18);
  --textMuted:#9498b5;--textDim:#5e6280;
  --text2:#9498b5;--text3:#5e6280;
  --accentLight:rgba(129,140,248,.10);--accentDim:rgba(129,140,248,.10);
  --greenDim:rgba(74,222,128,.10);--redDim:rgba(248,113,133,.08);--amberDim:rgba(251,191,36,.10);
  --sans:'DM Sans',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;
  --dim:#9498b5;--yellow:#fbbf24;--purple:#c4b5fd;
}

/* ═══ Reset ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ═══ Mood wash — corner accent blobs only (original look) ═══ */
body{background:
    radial-gradient(ellipse 60% 50% at 15% 20%,rgba(var(--m1),.22),transparent),
    radial-gradient(ellipse 50% 55% at 80% 15%,rgba(var(--m2),.17),transparent),
    radial-gradient(ellipse 55% 45% at 45% 70%,rgba(var(--m3),.13),transparent),
    radial-gradient(ellipse 40% 40% at 85% 80%,rgba(var(--m4),.10),transparent),
    radial-gradient(ellipse 30% 30% at 50% 40%,rgba(var(--m1),.07),transparent),
    #06060e !important;
  background-attachment:fixed !important}

/* ═══ Glass ═══ */
.ch-sidebar,.ch-mob-header{backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
.fade-up,.card-hover{backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}
[data-glass]{backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}

/* ═══ Inputs ═══ */
input,textarea,select{font-family:var(--font-sans);font-size:12.5px}
input::placeholder,textarea::placeholder,select::placeholder{color:var(--text-2) !important;opacity:.75 !important}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--accent-bg) !important}

/* ═══ Typography ═══ */
h1,h2,h3{font-family:var(--font-sans);font-weight:700;letter-spacing:-0.02em;line-height:1.2}
button{font-family:var(--font-sans);font-weight:600;font-size:12px;border-radius:var(--radius-sm);transition:all .12s ease}
button:active:not(:disabled){transform:scale(0.97)}

/* ═══ Spinner ═══ */
.spinner{display:inline-block;border:2px solid var(--spinner-track);border-top-color:var(--accent);border-radius:50%;width:16px;height:16px;animation:spin var(--spinner-speed) linear infinite}

/* ═══ Scrollbar ═══ */
::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.06);border-radius:99px}
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.06) transparent}
::selection{background:var(--accent);color:#fff}

/* ═══ Shared components ═══ */
.btn-hover{cursor:pointer;transition:all .15s ease}
.btn-hover:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.btn-hover:active:not(:disabled){transform:translateY(0)}
.card-hover{transition:border-color .2s ease}.card-hover:hover{border-color:var(--border-h)}
.fade-up{animation:fadeUp .3s ease both}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:800px){input,textarea,select{font-size:16px !important}}
@media print{body::before{display:none}body{background:#fff;color:#000}}

/* ═══ Utility classes ═══ */
.mono{font-family:var(--font-mono)}