/* themes.css — design tokens + light/dark UI themes (clean neutral) */

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 16px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  --shadow-2: 0 4px 12px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.08);
  --shadow-3: 0 12px 32px rgba(0,0,0,.20), 0 4px 8px rgba(0,0,0,.10);
  --tap: 40px;          /* base touch target */
  --tap-lg: 56px;       /* touch-mode target */
  --handle: 9px;        /* selection handle size */
  --handle-lg: 16px;
  --tbar-w: 56px;
  --transition: 140ms cubic-bezier(.2,.7,.3,1);
  --accent: #3b6cff;
  --accent-weak: rgba(59,108,255,.14);
  --danger: #e5484d;
  --ok: #30a46c;
}

/* LIGHT (default) */
:root, [data-theme="light"] {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-2: #f7f8fa;
  --panel-hover: #eef0f3;
  --border: #e3e6ea;
  --border-strong: #cfd4da;
  --text: #1b1e23;
  --text-dim: #626b76;
  --text-faint: #97a0ac;
  --overlay-scrim: rgba(20,22,26,.42);
  --canvas-shadow: rgba(0,0,0,.08);
}

/* DARK */
[data-theme="dark"] {
  --bg: #0f1115;
  --panel: #191c22;
  --panel-2: #14171c;
  --panel-hover: #232830;
  --border: #2a2f38;
  --border-strong: #3a414d;
  --text: #eceef1;
  --text-dim: #a5adb8;
  --text-faint: #6b7480;
  --overlay-scrim: rgba(0,0,0,.6);
  --canvas-shadow: rgba(0,0,0,.5);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 6px 18px rgba(0,0,0,.5);
  --shadow-3: 0 16px 40px rgba(0,0,0,.6);
}

/* System theme = follow OS unless overridden */
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg: #0f1115; --panel: #191c22; --panel-2: #14171c; --panel-hover: #232830;
    --border: #2a2f38; --border-strong: #3a414d; --text: #eceef1; --text-dim: #a5adb8;
    --text-faint: #6b7480; --overlay-scrim: rgba(0,0,0,.6); --canvas-shadow: rgba(0,0,0,.5);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 6px 18px rgba(0,0,0,.5); --shadow-3: 0 16px 40px rgba(0,0,0,.6);
  }
}