/*
 * Design tokens — the single source of truth for colour, type and spacing.
 *
 * Light is the default theme; [data-theme="dark"] overrides the same variable
 * names so every component stays theme-agnostic. Canvas code reads --canvas-bg,
 * --bg-panel and --fg-muted through getComputedStyle (renderer.js, rulers.js),
 * so those three must exist in both themes.
 */

:root {
  color-scheme: light;

  /* surfaces */
  --bg: #eceef1;
  --bg-panel: #ffffff;
  --bg-panel-alt: #f5f6f8;
  --bg-input: #ffffff;
  --bg-input-alt: #f2f3f6;
  --bg-hover: #eceef2;
  --bg-active: #e2e8fb;
  --bg-scrim: rgba(20, 24, 32, 0.32);

  /* lines */
  --border: #e1e4e9;
  --border-strong: #c8cdd6;
  --border-focus: #2f6fed;

  /* text */
  --fg: #1b1e24;
  --fg-muted: #5f6672;
  --fg-dim: #98a0ac;
  --fg-on-accent: #ffffff;

  /* accents */
  --accent: #2f6fed;
  --accent-hover: #2560d4;
  --accent-soft: rgba(47, 111, 237, 0.12);
  --accent-ring: rgba(47, 111, 237, 0.28);

  /* semantic */
  --danger: #d3352b;
  --danger-soft: rgba(211, 53, 43, 0.12);
  --warn: #a86400;
  --warn-soft: rgba(168, 100, 0, 0.14);
  --ok: #1a7f37;
  --ok-soft: rgba(26, 127, 55, 0.12);

  /* canvas pasteboard + artboard */
  --canvas-bg: #e4e6ea;
  --artboard-bg: #ffffff;
  --artboard-shadow: 0 1px 2px rgba(15, 23, 42, 0.10), 0 8px 28px rgba(15, 23, 42, 0.12);

  /* selection chrome drawn on the overlay canvas */
  --sel: #2f6fed;
  --sel-soft: rgba(47, 111, 237, 0.18);
  --sel-handle-fill: #ffffff;
  --guide: #12a5b8;
  --snap: #e0447c;

  /* shape */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* elevation */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.08);
  --shadow-2: 0 2px 4px rgba(16, 24, 40, 0.06), 0 8px 20px -4px rgba(16, 24, 40, 0.14);
  --shadow-3: 0 8px 16px -4px rgba(16, 24, 40, 0.14), 0 24px 48px -12px rgba(16, 24, 40, 0.22);

  /* type */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-lg: 14px;
  --lh: 1.45;

  /* spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;

  /* chrome metrics */
  --toolbar-w: 48px;
  --panel-w: 300px;
  --menubar-h: 38px;
  --tooloptions-h: 40px;
  --statusbar-h: 28px;
  --ruler: 22px;
  --ctl-h: 26px;
  --icon: 16px;

  --speed: 120ms;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #17181b;
  --bg-panel: #202126;
  --bg-panel-alt: #26272d;
  --bg-input: #1a1b1f;
  --bg-input-alt: #232429;
  --bg-hover: #2c2d34;
  --bg-active: #1d3050;
  --bg-scrim: rgba(0, 0, 0, 0.5);

  --border: #33343b;
  --border-strong: #464852;
  --border-focus: #5b93f5;

  --fg: #e8eaee;
  --fg-muted: #a2a8b3;
  --fg-dim: #6d737e;
  --fg-on-accent: #ffffff;

  --accent: #4d86f0;
  --accent-hover: #6497f4;
  --accent-soft: rgba(77, 134, 240, 0.18);
  --accent-ring: rgba(77, 134, 240, 0.35);

  --danger: #f0655c;
  --danger-soft: rgba(240, 101, 92, 0.16);
  --warn: #e0a13c;
  --warn-soft: rgba(224, 161, 60, 0.16);
  --ok: #4cc38a;
  --ok-soft: rgba(76, 195, 138, 0.16);

  --canvas-bg: #232428;
  --artboard-bg: #ffffff;
  --artboard-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.45);

  --sel: #5b93f5;
  --sel-soft: rgba(91, 147, 245, 0.25);
  --sel-handle-fill: #ffffff;
  --guide: #2cc4d8;
  --snap: #f0659c;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 10px 24px -6px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 28px 56px -16px rgba(0, 0, 0, 0.7);
}