/* ===== THRENNEL · Calm — design tokens ==================================
   One set of names, two palettes. Light is the default; dark applies when
   <html data-theme="dark">. The attribute is set before first paint by a tiny
   inline script in each page's <head> (reading the user's saved choice, or the
   OS preference when they picked "System"), so there is never a white flash
   on a dark-mode load.

   Linked by index.html AND every auth page. Load this BEFORE style.css.
   The accent is swapped at runtime by applySettings() in app.js, so never
   write an accent-derived colour as a literal — use
   color-mix(in srgb, var(--acc) N%, transparent).
   ======================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  color-scheme:light;

  /* --- surfaces ------------------------------------------------------- */
  --bg:#FBFAF7;        /* the page */
  --bg-lift:#FBFAF7;   /* kept for the auth pages' backgrounds */
  --side:#F4F2EE;      /* sidebar */
  --card:#FFFFFF;      /* cards, panels, menus */
  --field:#FFFFFF;     /* inputs */
  --hover:#EFECE6;     /* row / nav hover */
  --line:#ECE9E3;      /* dividers + card borders */
  --line-2:#DDD9D1;    /* stronger borders: inputs, buttons */
  --surface-1:#FFFFFF; /* toast */
  --surface-2:#FFFFFF; /* native <option> list */

  /* --- text ----------------------------------------------------------- */
  --t1:#1F1D1A;   /* headings, primary text */
  --t2:#3D3934;   /* body */
  --t3:#5E5A53;   /* secondary */
  --t4:#6B675F;   /* labels, meta (WCAG AA: >=4.5:1 on every surface) */
  --t5:#716D65;   /* faint, placeholders (still >=4.5:1 on bg/card) */
  --chip-ink:#3D3934;

  /* --- accent --------------------------------------------------------- */
  --acc:#5B5BD6;       /* user-swappable, see applySettings() */
  --glow:#5B5BD6;      /* legacy name, no glows in Calm */
  --on-acc:#FFFFFF;    /* text on an accent fill */
  --on-danger:#FFFFFF; /* text on a danger fill */
  --acc-soft:color-mix(in srgb,var(--acc) 11%,transparent);
  --acc-line:color-mix(in srgb,var(--acc) 35%,transparent);

  /* --- state ---------------------------------------------------------- */
  --ok:#157A58;
  --err:#C53030;
  --danger:#C53030;
  --warn:#975A16;
  --cost:#C2410C;
  --realm-k:#0B7299;   /* knowledge realm: collected content, not your own thoughts */
  --streak:#C4502B;

  /* --- depth ---------------------------------------------------------- */
  --shadow-sm:0 1px 2px rgba(31,29,26,.05);
  --shadow:0 1px 3px rgba(31,29,26,.05),0 8px 24px rgba(31,29,26,.05);
  --shadow-lg:0 12px 40px rgba(31,29,26,.12),0 2px 6px rgba(31,29,26,.06);
  --scrim:rgba(31,29,26,.32);

  /* --- spacing + radius + motion -------------------------------------- */
  --s1:6px; --s2:8px; --s3:10px; --s4:12px; --s5:14px; --s6:16px; --s7:24px;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:10px; --r-xl:12px; --r-2xl:14px;
  --r-3xl:16px; --r-4xl:20px; --r-5xl:24px; --r-pill:999px;
  --t-fast:.12s; --t-base:.15s; --t-state:.18s; --t-slow:.22s;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.2,.8,.2,1);

  /* --- type ----------------------------------------------------------- */
  --disp:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#141416;
  --bg-lift:#141416;
  --side:#1A1A1D;
  --card:#1E1E22;
  --field:#18181B;
  --hover:#26262B;
  --line:#2A2A30;
  --line-2:#38383F;
  --surface-1:#26262B;
  --surface-2:#1E1E22;

  --t1:#EDECEA;
  --t2:#D3D1CC;
  --t3:#A9A6A0;
  --t4:#95918A;
  --t5:#8F8C86;
  --chip-ink:#D3D1CC;

  --acc:#8282EE;
  --glow:#8282EE;
  --on-acc:#141416;   /* the lifted dark accents are light: dark ink reads */
  --on-danger:#141416;

  --ok:#3CC394;
  --err:#F07070;
  --danger:#F07070;
  --warn:#E0A54A;
  --cost:#F08A4B;
  --realm-k:#4FB8E3;
  --streak:#F08A62;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 3px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  --shadow-lg:0 16px 48px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
  --scrim:rgba(0,0,0,.55);
}

/* ===== reduced motion =================================================
   !important because this file loads before every other stylesheet. Delays
   are zeroed too, or staggered entrances would sit invisible on frame 0. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001s!important;
    animation-delay:0s!important;
    animation-iteration-count:1!important;
    transition-duration:.001s!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important}
}