/*
 * Design tokens (adapted from astrolabe styles/tokens.css). A single source of
 * truth for type, spacing, color, shape, and motion, themed by overriding the role
 * tokens on a `[data-mode]` root. Components consume these tokens ONLY — never raw
 * hexes.
 *
 * Inspired by the IBM Design Language / Carbon (structure borrowed, color free);
 * Carbon is not a dependency — the values are transcribed. Divergences: square
 * chrome (--radius: 0), an open/swappable accent.
 *
 * :root carries the theme-agnostic tokens AND the LIGHT theme, so light is the
 * default with no `[data-mode]` attribute (and an explicit `[data-mode='light']`
 * inherits it). `[data-mode='dark']` overrides the neutral/status/accent roles.
 */
:root {
  /* Type — IBM Plex with system fallbacks. NOTE: not self-hosted yet this slice;
     the fallbacks render until @fontsource imports are wired in. */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  --font-size-base: 14px;

  /* Spacing — 8px base unit (2/4 as sub-steps) */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;

  /* Shape — square chrome (icons keep their own rounded geometry) */
  --radius: 0px;
  --border-width: 1px;

  /* Control scale — every interactive control is one of exactly two heights.
     32px is THE control height (toolbar/form controls); 40px is reserved for
     standalone primary CTAs and modal footers. A third value is drift. */
  --control-height: 32px;
  --control-height-lg: 40px;

  /* Motion — productive only. No transition ships yet; the first one must come
     with a prefers-reduced-motion rule neutralizing these. */
  --dur-fast: 70ms;
  --dur-fast-2: 110ms;
  --dur-moderate: 150ms;
  --ease: cubic-bezier(0.2, 0, 0.38, 0.9);

  /* Focus ring defaults to the accent. */
  --focus: var(--accent);

  /* Contextual field fill — elevated surfaces set `--field: var(--field-02)`. */
  --field: var(--field-01);
  --field-hover: var(--field-hover-01);

  /* --- Neutral roles: LIGHT theme (Carbon gray ramp) — the default --- */
  --bg: #ffffff;
  --layer-01: #f4f4f4;
  --layer-02: #e0e0e0;
  --border: #e0e0e0;
  /* Component boundaries need 3:1 against the surface (WCAG 1.4.11); gray-50 is
     3.32:1 on the canvas (Carbon's $border-strong-01). */
  --border-strong: #8d8d8d;
  --field-01: #f4f4f4;
  --field-02: #ffffff;
  --field-hover-01: #e8e8e8;
  --field-hover-02: #e8e8e8;
  --text: #161616;
  --text-secondary: #525252;
  --text-placeholder: #a8a8a8;

  /* Status — color carries meaning only (light values; overridden in dark). */
  --support-error: #da1e28;
  --support-success: #198038;
  --support-warning: #f1c21b;
  /* Warning foreground: the raw yellow fails contrast on light surfaces, so status
     glyphs/text use a darkened amber. Dark theme keeps the yellow. */
  --support-warning-fg: #8a6d00;
  --support-info: #0043ce;
  --on-status: #ffffff;

  /* Accent — the FREE, swappable layer. Deep teal is the default (verified AA in
     both themes). An accent switcher can add `[data-accent]` overrides later. */
  --accent: #0e7490;
  --accent-hover: #0c5f77;
  --accent-contrast: #ffffff;
  /* Translucent accent for non-interactive emphasis washes (inspector reverse
     linkage, §01K) — pre-mixed per theme, content stays readable through it. */
  --accent-wash: rgba(14, 116, 144, 0.14);
  /* Warehouse — the source-table nodes in the model tab (spec §03R): a paper
     tint that reads as "the tables", apart from the datasources' layer grey.
     Not an accent and not a status: the fill is identity, never emphasis. */
  --warehouse-fill: #fbf3dc;
  --warehouse-ink: #6b4f00;

  /* Alignment guidelines (spec §01B): a hue deliberately distinct from the
     accent so a guide never blends with the dragged block's own selection
     outline (Figma's red-vs-blue split). Carbon magenta 60 / 40. */
  --snap-guide: #d02670;

  /* Elevation — exactly two shadow roles, one depth rule: floating = shadow,
     docked = seam + cast. Overlay: surfaces floating over content (menus,
     popovers, notices, canvas bars). Docked: the docked panels' cast onto the
     canvas — direction fixed per edge, so two tokens. */
  --shadow-overlay: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-docked-left: -6px 0 14px rgba(0, 0, 0, 0.1);
  --shadow-docked-up: 0 -6px 14px rgba(0, 0, 0, 0.1);
}

/* --- DARK theme: neutral, status, and accent overrides --- */
[data-mode='dark'] {
  --bg: #161616;
  --layer-01: #262626;
  --layer-02: #393939;
  --border: #393939;
  /* 3.60:1 on the dark canvas (Carbon g100 $border-strong-01). */
  --border-strong: #6f6f6f;
  --field-01: #262626;
  --field-02: #393939;
  --field-hover-01: #333333;
  --field-hover-02: #474747;
  --text: #f4f4f4;
  --text-secondary: #a8a8a8;
  --text-placeholder: #6f6f6f;

  --support-error: #fa4d56;
  --support-success: #42be65;
  --support-warning: #f1c21b;
  --support-warning-fg: #f1c21b;
  --support-info: #78a9ff;
  --on-status: #161616;

  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-contrast: #161616;
  --accent-wash: rgba(45, 212, 191, 0.18);
  --warehouse-fill: #3a3212;
  --warehouse-ink: #f1d27a;

  --snap-guide: #ff7eb6;

  /* Shadows read weaker on dark surfaces; the docked cast steps up. */
  --shadow-docked-left: -6px 0 14px rgba(0, 0, 0, 0.35);
  --shadow-docked-up: 0 -6px 14px rgba(0, 0, 0, 0.35);
}