/* ============================================================================
   Scrolls Design TOKENS — the single source of truth for colour, type, spacing.
   Contains ONLY CSS custom properties, fonts, and the base element reset (no
   component classes) so it is safe to drop into ANY UI without class collisions.
   Change the brand's colours / fonts / spacing HERE and every UI updates.
   The landing links this directly; the app links scrolls-ds.css (which @imports it).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

/* ---------- tokens: dark (default) ---------- */
:root{
  --bg:#0B0B0D; --surface:#141417; --surface-2:#1B1B1F;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16);
  --ink:#F4F4F2; --muted:#9A9A97; --faint:#5E5E5C;
  --glyph-faint:rgba(255,255,255,.09); --glyph-mid:rgba(255,255,255,.34); --glyph-strong:rgba(255,255,255,.92);
  --btn-fg:#0B0B0D; --btn-bg:#F4F4F2;

  /* semantic status — green is RESERVED for live/synced/online; red for errors.
     "working" is intentionally neutral so the palette stays B&W + greys + one green. */
  --live:#43B86A; --err:#E1524C; --work:var(--ink); --idle:var(--faint);
  --live-soft:rgba(67,184,106,.16); --err-soft:rgba(225,82,76,.16);

  --grain:.035;
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-serif:"Songti SC","Noto Serif","Times New Roman",serif;
  --pad-y:clamp(88px,15vw,156px);
  --edge:clamp(20px,5vw,64px);
  --maxw:1280px;
  --radius:12px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- tokens: light (explicit toggle OR OS preference when no theme is forced) ---------- */
:root[data-theme="light"]{
  --bg:#FAF9F6; --surface:#FFFFFF; --surface-2:#F4F3EF;
  --line:rgba(0,0,0,.10); --line-2:rgba(0,0,0,.16);
  --ink:#14140F; --muted:#6B6B66; --faint:#A6A6A0;
  --glyph-faint:rgba(0,0,0,.08); --glyph-mid:rgba(0,0,0,.32); --glyph-strong:rgba(0,0,0,.90);
  --btn-fg:#FAF9F6; --btn-bg:#14140F;
  --live-soft:rgba(67,184,106,.18); --err-soft:rgba(225,82,76,.14);
  --grain:.045;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    --bg:#FAF9F6; --surface:#FFFFFF; --surface-2:#F4F3EF;
    --line:rgba(0,0,0,.10); --line-2:rgba(0,0,0,.16);
    --ink:#14140F; --muted:#6B6B66; --faint:#A6A6A0;
    --glyph-faint:rgba(0,0,0,.08); --glyph-mid:rgba(0,0,0,.32); --glyph-strong:rgba(0,0,0,.90);
    --btn-fg:#FAF9F6; --btn-bg:#14140F;
    --live-soft:rgba(67,184,106,.18); --err-soft:rgba(225,82,76,.14);
    --grain:.045;
  }
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,svg{display:block}