/* ============================================================
   Web Imagine — Design tokens
   Theme & sizing driven entirely by CSS custom properties.
   Change a few vars on :root / [data-theme] to retheme.
   ============================================================ */

:root {
  /* Accent (overridable from Preferences) */
  --accent-h: 256;
  --accent-s: 90%;
  --accent-l: 64%;
  --accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --accent-strong: hsl(var(--accent-h) var(--accent-s) calc(var(--accent-l) - 10%));
  --accent-soft: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.16);
  --on-accent: #fff;

  /* Control sizing (Preferences: compact / normal / large) */
  --ui-scale: 1;
  --ctl-h: calc(28px * var(--ui-scale));
  --ctl-h-sm: calc(22px * var(--ui-scale));
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --radius: 7px;
  --radius-sm: 5px;
  --radius-lg: 12px;

  /* Typography */
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-base: calc(13px * var(--ui-scale));
  --fs-sm: calc(11.5px * var(--ui-scale));
  --fs-lg: calc(15px * var(--ui-scale));

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.25);
  --shadow-2: 0 8px 28px rgb(0 0 0 / 0.45);
  --transition: 120ms ease;
}

/* ---------- Dark theme (default) ---------- */
[data-theme="dark"] {
  --bg-app: #1b1d22;
  --bg-panel: #24262d;
  --bg-panel-2: #2b2e36;
  --bg-elevated: #30333c;
  --bg-input: #1a1c21;
  --bg-stage: #15161a;
  --bg-hover: #ffffff14;
  --bg-active: #ffffff1f;

  --border: #ffffff14;
  --border-strong: #ffffff26;
  --divider: #00000040;

  --text: #e7e9ee;
  --text-dim: #a6abb6;
  --text-mute: #6f7682;
  --text-on-input: #eef0f4;

  --canvas-checker-a: #6a6a6a;
  --canvas-checker-b: #565656;
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
  --bg-app: #eceef2;
  --bg-panel: #f6f7f9;
  --bg-panel-2: #fdfdfe;
  --bg-elevated: #ffffff;
  --bg-input: #ffffff;
  --bg-stage: #c6c9d0;
  --bg-hover: #00000010;
  --bg-active: #0000001a;

  --border: #00000016;
  --border-strong: #00000026;
  --divider: #00000018;

  --text: #1c1f25;
  --text-dim: #565b66;
  --text-mute: #8a909c;
  --text-on-input: #1c1f25;

  --canvas-checker-a: #cfcfcf;
  --canvas-checker-b: #ffffff;
}

/* ---------- Contrast levels ---------- */
[data-contrast="high"] {
  --border: var(--border-strong);
  --text-dim: var(--text);
}

/* ---------- UI density ---------- */
[data-density="compact"] { --ui-scale: 0.9; }
[data-density="normal"]  { --ui-scale: 1; }
[data-density="large"]   { --ui-scale: 1.15; }