/*
 * Over — Design Tokens
 * The ONLY file allowed to contain raw hex / px / rem values.
 * Everything else references these tokens.
 * Palette, type scale, and spacing scale are deliberately small.
 * Source: Cursor Automations UI screenshots (2026-07).
 */

:root {
  /* ── Colour (limited ramp) ── */
  --bg:            #0d0d0d;  /* page + sidebar (separated by borders, not fills) */
  --surface:       #161616;  /* cards, active nav, hover raise, active tab */
  --surface-hover: #1e1e1e;  /* hover on interactive surfaces */
  --border:        #262626;  /* visible dividers, card borders */
  --border-soft:   #1b1b1b;  /* quiet dividers */

  --text:          #e6e6e6;  /* primary */
  --text-dim:      #8a8a8a;  /* secondary */
  --text-faint:    #5a5a5a;  /* muted / placeholder */

  --accent:        #3b82f6;  /* focus + active indicator, used sparingly */
  --success:       #3fb950;  /* run-history sparkline, active status */
  --danger:        #e5484d;  /* destructive actions (delete), used sparingly */
  --white:         #ffffff;

  /* ── Typography (one family, small scale) ── */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          Inter, system-ui, sans-serif;
  --font-mono: "SF Mono", "Fira Code", ui-monospace, monospace;

  --fs-xs:   11px;  /* meta, badges */
  --fs-sm:   12px;  /* secondary text, table headers */
  --fs-base: 13px;  /* body, nav, cells */
  --fs-lg:   15px;  /* section / page titles */
  --fs-xl:   20px;  /* stat numbers */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;

  /* ── Spacing (single 4px scale) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ── Radius ── */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* ── Icon sizes ── */
  --icon: 16px;      /* nav + action icons */
  --icon-sm: 14px;   /* tab + inline icons */

  /* ── Control heights (every interactive control's height — never a raw px) ── */
  --control-h:    28px;  /* buttons, icon buttons, inline editors, compact selects */
  --control-h-sm: 26px;  /* sub-tabs and other compact controls */
  --badge-h:      20px;  /* badges / pills */
  --field-h:      34px;  /* form inputs / selects / textareas single-row height */

  /* ── Layout dimensions ── */
  --sidebar-default:   220px;
  --sidebar-min:       168px;
  --sidebar-max:       340px;
  /* 48 = rail-pad(8) + navitem-pad(8) + icon(16) + navitem-pad(8) + rail-pad(8):
     keeps the icon column at the same x when collapsed, so icons don't shift */
  --sidebar-collapsed:  48px;

  --rightpanel-default: 300px;
  --rightpanel-min:     220px;
  --rightpanel-max:     520px;

  --navitem-h: 34px;
  --topbar-h:  40px;   /* single top-band height: tab bar, sidebar header, panel header */
  --resizer-w:  6px;

  /* Horizontal inset shared by sidebar header + menu rows so icons align in one column */
  --rail-pad: var(--sp-2);

  --content-max: 860px;  /* centred content column */
  --content-min: 600px;  /* main content never shrinks below this; the .view scrolls
                            horizontally instead of clipping (table keeps its own scroll) */
  --form-w: 520px;       /* max width of a single-column form (readable line length) */

  /* ── Tree view (Views "tree" kind) ── */
  --vtree-node-w: 200px;   /* fixed node-card width (shared across all levels) */
  --vtree-indent: var(--sp-4);  /* per-level indent of the vertical outline rail */

  /* ── Data-model designer (Datasets view) ──
     Semantic hues for the schema map. Kept muted to sit inside the restrained
     dark palette. Documented in docs/architecture/ui.md. */
  --dm-grid:      #151515;  /* canvas grid lines over --bg */
  --dm-pk:        #d4a72c;  /* primary-key field (amber-gold) */
  --dm-rel:       #cf8a4b;  /* link / foreign-key relation (amber) */
  --dm-compute:   #8b7fd6;  /* rollup / lookup / formula (violet) */
  --dm-subtype:   #37b6a6;  /* subtype / 1:1 extension (teal) */

  --dm-card-w:      248px;  /* table-card width (mirrored in datamodel.js W) */
  --dm-row-h:       28px;   /* field-row height (mirrored in datamodel.js H_ROW) */
  --dm-inspector-w: 320px;  /* inspector drawer width */

  /* ── Elevation ── */
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);

  /* ── Z-index ── */
  --z-panel: 20;
  --z-resizer: 30;
  --z-menu: 40;
}