/* @telicx/design-core — neutral, brand-agnostic design tokens (the shared look & feel).
 * Canonical source; synced into each app's public/styles/ by sync.mjs (no bundler).
 * Brand identity (accent, logo, brand palette) lives in a brand layer loaded AFTER this. */
:root {
  /* surfaces + text (light, default) */
  --bg: #f7f9fc;
  --panel: #ffffff;
  --panel-2: #f1f4fb;
  --border: #dde3ef;
  --text: #141822;
  --text-dim: #56607a;
  --text-muted: #8893a8;

  /* semantic states */
  --green: #15935b;
  --red: #e5484d;
  --amber: #d97706;
  --new: #0e7490;   /* teal — new vehicles */
  --used: #b45309;  /* amber — used vehicles */

  /* elevation + geometry */
  --shadow: 0 1px 2px rgba(11, 16, 32, 0.04), 0 4px 16px rgba(11, 16, 32, 0.06);
  --shadow-lg: 0 8px 40px rgba(11, 16, 32, 0.14);
  --radius: 14px;
  --radius-sm: 10px;
  --canvas: 1500px;
  --gutter: 28px;

  /* type */
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

:root[data-theme='dark'] {
  --bg: #070b18;
  --panel: #0f1426;
  --panel-2: #131a30;
  --border: #212a45;
  --text: #eef2fb;
  --text-dim: #9aa6c4;
  --text-muted: #6b769a;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 50px rgba(0, 0, 0, 0.5);
}