/* ============================================================
   Inkwell — shared design tokens
   Single source of truth for BOTH surfaces:
     notes.php → tokens.css + app.css
     index.php → tokens.css + blog.css
   Loaded first so every component can rely on these.
   ============================================================ */

/* ---------- dark (default) ---------- */
:root {
  --bg:        #0f1117;
  --bg2:       #151923;
  --bg3:       #1e2431;
  --panel:     #12151e;
  --elevated:  #1a1f2b;
  --border:    #262d3c;
  --border-soft:#1c222e;
  --fg:        #e7e9ef;
  --fg-dim:    #98a1b2;
  --fg-faint:  #6a7387;
  --accent:    #7aa2f7;
  --accent-ink:#0d1017;
  --accent-soft: rgba(122,162,247,.15);
  --accent-line: rgba(122,162,247,.45);
  --accent2:   #6ecf82;
  --danger:    #ff6b6b;
  --warn:      #ffd93d;

  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 5px;  --r: 8px;  --r-lg: 12px;  --r-xl: 16px;
  --sh-1: 0 1px 2px rgba(0,0,0,.30);
  --sh-2: 0 6px 20px rgba(0,0,0,.38);
  --sh-3: 0 24px 70px rgba(0,0,0,.55);
  --ease: cubic-bezier(.4,0,.2,1);
  --t: 140ms var(--ease);

  /* layout, overridden live by JS */
  --sb-w: 272px;          /* notes: sidebar width               */
  --editor-basis: 50%;    /* notes: editor share in split mode  */
  --read-w: 760px;        /* both: reading column measure       */
}

/* ---------- light ---------- */
:root[data-theme="light"] {
  --bg:        #ffffff;
  --bg2:       #f7f8fa;
  --bg3:       #eceef2;
  --panel:     #fafbfc;
  --elevated:  #ffffff;
  --border:    #dde1e8;
  --border-soft:#ecedf1;
  --fg:        #1a1d24;
  --fg-dim:    #5b6474;
  --fg-faint:  #868f9f;
  --accent:    #3868cf;
  --accent-ink:#ffffff;
  --accent-soft: rgba(56,104,207,.10);
  --accent-line: rgba(56,104,207,.40);
  --accent2:   #1f9d52;
  --danger:    #d63a3a;
  --warn:      #b8860b;
  --sh-1: 0 1px 2px rgba(16,24,40,.06);
  --sh-2: 0 6px 20px rgba(16,24,40,.10);
  --sh-3: 0 24px 70px rgba(16,24,40,.18);
}

/* shared motion preference */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}