/**
 * CutGo workspace design tokens — aligned with extension-shell (popup / side panel).
 * Primary: brand lime. Secondary: accent blue (timeline ranges, info tags).
 */

:root {
  --cg-brand: #a3e635;
  --cg-brand-hover: #b8f04a;
  --cg-brand-dim: rgba(163, 230, 53, 0.12);
  --cg-brand-line: rgba(163, 230, 53, 0.32);
  --cg-brand-glow: rgba(163, 230, 53, 0.18);

  --cg-accent-blue: #0a84ff;
  --cg-accent-blue-dim: rgba(10, 132, 255, 0.12);
  --cg-accent-blue-line: rgba(10, 132, 255, 0.38);

  --cg-bg: #070708;
  --cg-bg-raised: #0a0a0c;
  --cg-surface: #101012;
  --cg-surface-2: #151517;
  --cg-panel: #121214;
  --cg-line: rgba(255, 255, 255, 0.09);
  --cg-line-soft: rgba(255, 255, 255, 0.05);
  --cg-text: rgba(245, 245, 247, 0.94);
  --cg-text-secondary: rgba(174, 174, 178, 0.9);
  --cg-muted: rgba(142, 142, 147, 0.85);
  --cg-danger: #ff453a;
  --cg-warn: #ffcc00;

  --cg-radius-sm: 5px;
  --cg-radius-md: 7px;
  --cg-radius-lg: 9px;

  /* Middle shot-library header ↔ right AI inspector head — same divider Y */
  --ws-side-panel-head-h: 42px;

  /* Column / row split gutter — matches layout-resizer & stage-row-resizer */
  --workspace-split-gap: 4px;
  /* Stacked card gutters (program↔timeline, timeline↔footer) — same as column resizer */
  --workspace-card-gutter: var(--workspace-split-gap, 4px);
  --workspace-timeline-h: auto;
  --program-chrome-bg: var(--cg-surface, #101012);
  --cg-font: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  /* Mono for code-like UI. Prefer --cg-font-timecode for clocks/rulers (no slashed zero). */
  --cg-font-mono: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  --cg-font-timecode: 'SF Pro Text', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Helvetica Neue', 'PingFang SC', sans-serif;

  /* Legacy aliases used in workspace.css */
  --blue: var(--cg-accent-blue);
  --bg: var(--cg-bg-raised);
  --panel: var(--cg-panel);
  --line: rgba(255, 255, 255, 0.07);
  --soft: #232326;
  --muted: var(--cg-muted);
  --text: var(--cg-text);
  --green: var(--cg-brand);
  --red: var(--cg-danger);
}