/* ==========================================================================
   Design tokens — CNC File Optimizer
   One accent colour, semantic status colours, a 4/8 px spacing rhythm and
   two themes (dark is the default; light via [data-theme=light] or the OS).
   The viewer reads the --tp-* / --viewer-* / --relief-* variables from the
   canvas, so both themes must define every one of them.
   ========================================================================== */
:root {
  color-scheme: dark;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;

  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;/* 15 */
  --fs-md: 1.0625rem;  /* 17 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.625rem;   /* 26 */
  --fs-2xl: 2.375rem;  /* 38 */
  --lh: 1.5;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 120ms; --t-med: 220ms;

  --maxw: 1320px;
  --sidebar-w: 372px;
  --row-h: 22px;
  --topbar-h: 56px;

  /* --- dark palette (default) --- */
  --bg: #0e1116;
  --bg-2: #12161c;
  --surface: #171c23;
  --surface-2: #1d232c;
  --surface-3: #242c37;
  --border: #2a323e;
  --border-strong: #3a4452;
  --text: #e7eaf0;
  --text-2: #a2acba;
  --text-3: #6f7a8a;
  --accent: #2f6fe6;            /* fills: white text on top passes AA */
  --accent-hover: #3f7df2;
  --accent-text: #86b3ff;       /* accent as text on dark surfaces */
  --accent-soft: rgba(63, 125, 242, 0.14);
  --ok: #34c17a;  --ok-text: #6fe0a5;  --ok-soft: rgba(52, 193, 122, 0.14);
  --warn: #e3a12a; --warn-text: #f3c56b; --warn-soft: rgba(227, 161, 42, 0.16);
  --bad: #e2504d;  --bad-text: #ff8b88;  --bad-soft: rgba(226, 80, 77, 0.16);
  --focus: #8fb8ff;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset;
  --shadow-2: 0 12px 32px rgba(0,0,0,.45);
  --code-bg: #0b0e12;

  /* diff colours */
  --diff-add: rgba(52, 193, 122, 0.16);
  --diff-del: rgba(226, 80, 77, 0.16);
  --diff-chg: rgba(227, 161, 42, 0.16);
  --diff-add-bar: #34c17a; --diff-del-bar: #e2504d; --diff-chg-bar: #e3a12a;

  /* toolpath viewer */
  --tp-rapid: #f5a524;
  --tp-cut: #4cc9f0;
  --tp-plunge: #ff6fae;
  --tp-arc: #b48cff;
  --tp-before: #6b7683;
  --viewer-bg: #0b0e12;
  --viewer-grid: #232a34;
  --viewer-axis-x: #ef5b5b;
  --viewer-axis-y: #4fd26a;
  --viewer-axis-z: #5b8cff;
  --relief-lo: #23304a;
  --relief-hi: #c9d6ea;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f9;
  --bg-2: #eceff4;
  --surface: #ffffff;
  --surface-2: #f6f8fb;
  --surface-3: #eaeef4;
  --border: #d9dee6;
  --border-strong: #b9c1cc;
  --text: #161a20;
  --text-2: #4f5866;
  --text-3: #7b8594;
  --accent: #2457d6;
  --accent-hover: #1d4bc0;
  --accent-text: #1f4fc4;
  --accent-soft: rgba(36, 87, 214, 0.10);
  --ok: #178a52;  --ok-text: #14733f;  --ok-soft: rgba(23, 138, 82, 0.12);
  --warn: #b26f00; --warn-text: #8a5600; --warn-soft: rgba(178, 111, 0, 0.12);
  --bad: #c9302c;  --bad-text: #a72622;  --bad-soft: rgba(201, 48, 44, 0.10);
  --focus: #2457d6;
  --shadow-1: 0 1px 2px rgba(20,30,50,.08), 0 0 0 1px rgba(20,30,50,.04);
  --shadow-2: 0 12px 32px rgba(20,30,50,.14);
  --code-bg: #f9fafc;
  --diff-add: rgba(23, 138, 82, 0.13);
  --diff-del: rgba(201, 48, 44, 0.12);
  --diff-chg: rgba(178, 111, 0, 0.14);
  --diff-add-bar: #178a52; --diff-del-bar: #c9302c; --diff-chg-bar: #b26f00;
  --tp-rapid: #d97706;
  --tp-cut: #0284c7;
  --tp-plunge: #db2777;
  --tp-arc: #7c3aed;
  --tp-before: #9aa3ae;
  --viewer-bg: #f7f8fa;
  --viewer-grid: #dfe4ea;
  --viewer-axis-x: #d64545;
  --viewer-axis-y: #2e9e4b;
  --viewer-axis-z: #3b6fe0;
  --relief-lo: #b7c3d6;
  --relief-hi: #ffffff;
}

/* No-JS / before theme.js runs: follow the OS. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #f4f6f9; --bg-2: #eceff4; --surface: #ffffff; --surface-2: #f6f8fb; --surface-3: #eaeef4;
    --border: #d9dee6; --border-strong: #b9c1cc; --text: #161a20; --text-2: #4f5866; --text-3: #7b8594;
    --accent: #2457d6; --accent-hover: #1d4bc0; --accent-text: #1f4fc4; --accent-soft: rgba(36, 87, 214, 0.10);
    --ok: #178a52; --ok-text: #14733f; --ok-soft: rgba(23, 138, 82, 0.12);
    --warn: #b26f00; --warn-text: #8a5600; --warn-soft: rgba(178, 111, 0, 0.12);
    --bad: #c9302c; --bad-text: #a72622; --bad-soft: rgba(201, 48, 44, 0.10);
    --focus: #2457d6; --code-bg: #f9fafc;
    --shadow-1: 0 1px 2px rgba(20,30,50,.08), 0 0 0 1px rgba(20,30,50,.04);
    --shadow-2: 0 12px 32px rgba(20,30,50,.14);
    --diff-add: rgba(23, 138, 82, 0.13); --diff-del: rgba(201, 48, 44, 0.12); --diff-chg: rgba(178, 111, 0, 0.14);
    --diff-add-bar: #178a52; --diff-del-bar: #c9302c; --diff-chg-bar: #b26f00;
    --tp-rapid: #d97706; --tp-cut: #0284c7; --tp-plunge: #db2777; --tp-arc: #7c3aed; --tp-before: #9aa3ae;
    --viewer-bg: #f7f8fa; --viewer-grid: #dfe4ea; --viewer-axis-x: #d64545; --viewer-axis-y: #2e9e4b; --viewer-axis-z: #3b6fe0;
    --relief-lo: #b7c3d6; --relief-hi: #ffffff;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
}