/* =====================================================================
   Motio — Dark Pro theme tokens + component overrides
   Near-black canvas, signal-yellow accent, mono numerics & labels.
   ===================================================================== */

/* ---------- Tokens ---------- */
body[data-theme="pro"] {
  --stage-bg: oklch(24% .004 260);
  --bg: oklch(13% .004 260);
  --surface: oklch(18.5% .005 260);
  --surface-2: oklch(23% .006 260);
  --fg: oklch(96% .003 260);
  --muted: oklch(64% .008 260);
  --border: oklch(27% .006 260);
  --border-strong: oklch(46% .008 260);
  --accent: oklch(87% .17 92);
  --accent-fg: oklch(17% .02 92);
  --success: oklch(74% .17 150);
  --radius: 12px; --radius-sm: 6px; --btn-radius: 10px; --chip-radius: 6px; --logo-radius: 7px;
  --font-display: -apple-system, "SF Pro Display", system-ui, sans-serif;
  --font-body: -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --h1-size: 30px; --h1-weight: 700; --h1-tracking: -.015em;
  --wordmark-font: 700 18px/1 var(--font-display);
  --nav-title-font: 600 12px/1 var(--font-mono); --nav-title-tracking: .14em; --nav-title-transform: uppercase;
  --label-font: 600 11px/1 var(--font-mono); --label-transform: uppercase; --label-tracking: .12em;
  --eyebrow-font: 500 11px/1 var(--font-mono);
  --dock-bg: oklch(13% .004 260 / .82);
  --badge-bg: oklch(13% .004 260 / .7); --badge-fg: var(--accent);
  --key: var(--accent); --key-ink: var(--accent-fg);
  --win: oklch(96% .003 260); --win-ink: oklch(13% .004 260);
  --switch-on: var(--accent);
  --cols: 3; --gap: 2px;
}
body[data-theme="pro"] .seg { background: transparent; border: 1px solid var(--border); border-radius: 8px; }
body[data-theme="pro"] .seg button { font: 600 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
body[data-theme="pro"] .seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--accent); box-shadow: none; }
body[data-theme="pro"] .chips button { background: transparent; border: 1px solid var(--border); }
body[data-theme="pro"] .chips button[aria-pressed="true"] { border-color: var(--accent); }
/* rule-of-thirds overlay + crop corners — the pro flourish */
body[data-theme="pro"] .preview::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(33.33% - .5px), rgb(255 255 255 / .22) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgb(255 255 255 / .22) 0 calc(66.66% + .5px), transparent 0),
    linear-gradient(transparent calc(33.33% - .5px), rgb(255 255 255 / .22) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgb(255 255 255 / .22) 0 calc(66.66% + .5px), transparent 0);
}
body[data-theme="pro"] .preview { border-radius: 4px; outline: 1px solid var(--border); }
body[data-theme="pro"] .h1 { font-family: var(--font-mono); font-size: 26px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
body[data-theme="pro"] .list { background: transparent; }
body[data-theme="pro"] .success h2 { font-family: var(--font-mono); text-transform: uppercase; font-size: 22px; letter-spacing: .06em; }

/* active chip: outlined in accent rather than filled */
body[data-theme="pro"] .chips button[aria-pressed="true"] { background: transparent; color: var(--accent); border-color: var(--accent); }