/* ACDC v6 · design tokens
 * Light is the default. Dark follows the system unless the user picks a theme
 * (data-theme on <html>). Colour always travels with a glyph and a word.
 */


:root {
  color-scheme: light;

  /* Type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --text-xs: 11.5px;
  --text-sm: 12.5px;
  --text-md: 13.5px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 24px;
  --leading: 1.45;

  /* Space: 4px grid */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;

  /* Shape */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --row: 36px;
  --control: 30px;
  --rail: 232px;
  --rail-collapsed: 56px;
  --topbar: 48px;
  --inspector: 344px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 120ms;
  --med: 200ms;

  /* Surfaces */
  --bg: #f6f6f3;
  --surface: #ffffff;
  --surface-2: #fafaf8;
  --sunken: #efefeb;
  --overlay: #ffffff;
  --scrim: rgba(16, 22, 21, 0.42);

  /* Ink */
  --ink: #161d1c;
  --ink-2: #47524f;
  --ink-3: #5c6663;
  --ink-4: #626c69;
  --ink-faint: #a0a8a5;
  --field-line: #868f8c;
  --line: #e5e5e0;
  --line-2: #d3d4ce;

  /* Rail (always dark) */
  --rail-bg: #131b1a;
  --rail-ink: #eef1f0;
  --rail-ink-2: #97a3a0;
  --rail-line: #232e2c;
  --rail-hover: #1b2523;
  --rail-active: #222e2c;

  /* Brand voltage */
  --accent: #d63a17;
  --accent-hover: #bf3112;
  --accent-mark: #f24b2b;
  --accent-ink: #b32f0e;
  --accent-bg: #fdeee9;
  --accent-line: #f5c0b1;
  --on-accent: #ffffff;

  /* Semantic tones: mark / ink / wash / line */
  --ok-mark: #1b8a74;
  --ok-ink: #12614f;
  --ok-bg: #e6f4f0;
  --ok-line: #b5ddd2;

  --run-mark: #2f66e0;
  --run-ink: #2250bd;
  --run-bg: #eaf0fd;
  --run-line: #bdd0f7;

  --warn-mark: #b87400;
  --warn-ink: #855600;
  --warn-bg: #fdf3e0;
  --warn-line: #f0d59c;

  --hold-mark: var(--accent-mark);
  --hold-ink: var(--accent-ink);
  --hold-bg: var(--accent-bg);
  --hold-line: var(--accent-line);

  --idle-mark: #7e8885;
  --idle-ink: #56605d;
  --idle-bg: #f0f1ee;
  --idle-line: #d9dbd6;

  --ref: #2250bd;
  --ref-hover: #173c93;
  --focus: #2f66e0;

  --shadow-pop: 0 0 0 1px rgba(16, 22, 21, 0.08), 0 8px 28px -6px rgba(16, 22, 21, 0.22);
  --shadow-dialog: 0 0 0 1px rgba(16, 22, 21, 0.08), 0 24px 64px -12px rgba(16, 22, 21, 0.38);
}

/* Dark values, applied by system preference or explicit choice */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0d1312;
  --surface: #141b1a;
  --surface-2: #182120;
  --sunken: #0a0f0e;
  --overlay: #1a2322;
  --scrim: rgba(0, 0, 0, 0.6);

  --ink: #e9edec;
  --ink-2: #b4bebb;
  --ink-3: #98a3a0;
  --ink-4: #7f8b88;
  --ink-faint: #5d6865;
  --field-line: #6b7774;
  --line: #222c2a;
  --line-2: #323e3b;

  --rail-bg: #090d0d;
  --rail-line: #1a2321;
  --rail-hover: #131a19;
  --rail-active: #1a2422;

  --accent: #cf3a17;
  --accent-hover: #e04a25;
  --accent-mark: #ff6a47;
  --accent-ink: #ff8f72;
  --accent-bg: #2e1610;
  --accent-line: #5c281a;

  --ok-mark: #3fbf9f;
  --ok-ink: #6bd6b9;
  --ok-bg: #0f2a24;
  --ok-line: #1c4a40;

  --run-mark: #6f9bff;
  --run-ink: #9ab9ff;
  --run-bg: #131f3a;
  --run-line: #26396b;

  --warn-mark: #e8a531;
  --warn-ink: #f2c063;
  --warn-bg: #2b2110;
  --warn-line: #55421b;

  --idle-mark: #7c8885;
  --idle-ink: #a3aeab;
  --idle-bg: #1a2221;
  --idle-line: #2c3735;

  --ref: #9ab9ff;
  --ref-hover: #c0d3ff;
  --focus: #6f9bff;

  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 28px -6px rgba(0, 0, 0, 0.7);
  --shadow-dialog: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 64px -12px rgba(0, 0, 0, 0.8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0d1312;
    --surface: #141b1a;
    --surface-2: #182120;
    --sunken: #0a0f0e;
    --overlay: #1a2322;
    --scrim: rgba(0, 0, 0, 0.6);
    --ink: #e9edec;
    --ink-2: #b4bebb;
    --ink-3: #98a3a0;
    --ink-4: #7f8b88;
    --ink-faint: #5d6865;
    --field-line: #6b7774;
    --line: #222c2a;
    --line-2: #323e3b;
    --rail-bg: #090d0d;
    --rail-line: #1a2321;
    --rail-hover: #131a19;
    --rail-active: #1a2422;
    --accent: #cf3a17;
    --accent-hover: #e04a25;
    --accent-mark: #ff6a47;
    --accent-ink: #ff8f72;
    --accent-bg: #2e1610;
    --accent-line: #5c281a;
    --ok-mark: #3fbf9f;
    --ok-ink: #6bd6b9;
    --ok-bg: #0f2a24;
    --ok-line: #1c4a40;
    --run-mark: #6f9bff;
    --run-ink: #9ab9ff;
    --run-bg: #131f3a;
    --run-line: #26396b;
    --warn-mark: #e8a531;
    --warn-ink: #f2c063;
    --warn-bg: #2b2110;
    --warn-line: #55421b;
    --idle-mark: #7c8885;
    --idle-ink: #a3aeab;
    --idle-bg: #1a2221;
    --idle-line: #2c3735;
    --ref: #9ab9ff;
    --ref-hover: #c0d3ff;
    --focus: #6f9bff;
    --shadow-pop: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 28px -6px rgba(0, 0, 0, 0.7);
    --shadow-dialog: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 64px -12px rgba(0, 0, 0, 0.8);
  }
}

/* Comfortable density: taller rows, larger body text */
:root[data-density='comfortable'] {
  --text-sm: 13px;
  --text-md: 14.5px;
  --text-lg: 16px;
  --row: 42px;
  --control: 34px;
}

/* Tone helper: any element with data-tone exposes the four tone variables */
[data-tone='ok'] { --t-mark: var(--ok-mark); --t-ink: var(--ok-ink); --t-bg: var(--ok-bg); --t-line: var(--ok-line); }
[data-tone='run'] { --t-mark: var(--run-mark); --t-ink: var(--run-ink); --t-bg: var(--run-bg); --t-line: var(--run-line); }
[data-tone='warn'] { --t-mark: var(--warn-mark); --t-ink: var(--warn-ink); --t-bg: var(--warn-bg); --t-line: var(--warn-line); }
[data-tone='hold'] { --t-mark: var(--hold-mark); --t-ink: var(--hold-ink); --t-bg: var(--hold-bg); --t-line: var(--hold-line); }
[data-tone='idle'], [data-tone='done'], [data-tone='unknown'] { --t-mark: var(--idle-mark); --t-ink: var(--idle-ink); --t-bg: var(--idle-bg); --t-line: var(--idle-line); }