/*
 * VUMO design tokens, derived from the VUMO Brand Core design system
 * (/opt/vumo-cro/design/VUMO_DESIGN_SYSTEM.md, same file in vumo-ops / vumo-cfo).
 * The single declarative token file: linked before styles.css on every page.
 * Pages and components reference these variables only; a raw brand hex anywhere
 * else is a review reject (test/design-tokens.test.js enforces it).
 * Surface class for the outbound dashboard: OPERATIONAL (pointer-first).
 */
:root {
  color-scheme: light;

  /* colors: light theme constants */
  --color-ink: #1a1b21;
  --color-slate: #7d858e;
  --color-accent: #ff4417;
  --color-canvas: #f2f2f2;
  --color-surface: #ffffff;
  --color-pale: #d8e1ea;
  --color-line: #cccccc;
  --color-separator: #eaeaea;
  --color-gray: #e2e2e2;
  --color-midnight: #081f2d;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-glass: rgba(19, 18, 26, 0.7);

  /* status: semantic, never expressed with accent */
  --color-error: #d71919;
  --color-success: #2fa86a;
  --color-success-fill: #56cd54;
  --color-warning: #e68a00;

  /* the top bar is ink in both themes */
  --color-bar: #1a1b21;
  --color-on-bar: #ffffff;
  --color-on-bar-muted: #9aa0a8;

  /* typography: Space Grotesk only */
  --font-sans: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --type-display: 400 40px / 1 var(--font-sans);
  --type-display-tracking: -0.06em;
  --type-h1: 400 30px / 1.05 var(--font-sans);
  --type-h1-tracking: -0.05em;
  --type-h2: 500 22px / 1.1 var(--font-sans);
  --type-h2-tracking: -0.045em;
  --type-h3: 500 19px / 1.15 var(--font-sans);
  --type-h3-tracking: -0.03em;
  --type-h4: 600 16px / 1.25 var(--font-sans);
  --type-h4-tracking: -0.02em;
  --type-body-lg: 400 16px / 1.5 var(--font-sans);
  --type-body-md: 500 14px / 1.5 var(--font-sans);
  --type-body-sm: 500 12px / 1.45 var(--font-sans);
  --type-label-caps: 600 11px / 1.25 var(--font-sans);
  --type-label-caps-tracking: 0.105em;

  /* spacing: base unit 4px */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-page-x: 18px;
  --spacing-page-y: 20px;
  --spacing-gutter: 24px;

  /* radius: 0 on every rectangle; full only for dots and spinners */
  --radius-none: 0px;
  --radius-full: 9999px;

  /* operational density */
  --control-height: 40px;
  --input-height: 42px;
  --nav-height: 56px;
  --row-height: 48px;

  /* motion */
  --motion-micro: 90ms;
  --motion-fast: 140ms;
  --motion-base: 240ms;
  --ease-default: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-commit: cubic-bezier(0.16, 1, 0.3, 1);
}

/* dark theme: one seam, components are never forked per theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-ink: #f2f2f2;
    --color-slate: #9aa0a8;
    --color-accent: #ff6a47;
    --color-canvas: #121212;
    --color-surface: #1c1c1e;
    --color-pale: #31404c;
    --color-line: #3e3e42;
    --color-separator: #313131;
    --color-gray: #333333;
    --color-glass: rgba(232, 232, 232, 0.7);
    --color-error: #ff5252;
    --color-success: #7de57b;
    --color-warning: #f2a93b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-ink: #f2f2f2;
  --color-slate: #9aa0a8;
  --color-accent: #ff6a47;
  --color-canvas: #121212;
  --color-surface: #1c1c1e;
  --color-pale: #31404c;
  --color-line: #3e3e42;
  --color-separator: #313131;
  --color-gray: #333333;
  --color-glass: rgba(232, 232, 232, 0.7);
  --color-error: #ff5252;
  --color-success: #7de57b;
  --color-warning: #f2a93b;
}