/* ──────────────────────────────────────────────────────────────────────────
   Auto Expert — design tokens. "Automotive precision laboratory."
   Light-first. Blue = information/action, green = verified, amber = caution,
   red = urgent. No pure black, no gradients as decoration, hairline rules.
   Legacy aliases (--teal, --gold, --ink…) keep older component CSS coherent.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --canvas: #F7F8FA;
  --surface: #FFFFFF;
  --surface-2: #EEF3F7;
  --hairline: rgba(20, 34, 53, 0.10);
  --hairline-strong: rgba(20, 34, 53, 0.18);

  /* Text */
  --text: #142235;
  --text-2: #5F6E7C;
  --text-3: #8795A3;

  /* Semantic color */
  --blue: #176BFF;
  --blue-deep: #0F4FC2;
  --blue-accent: #3B82F6;
  --cyan: #00A8C6;
  --ok: #168B67;
  --warn: #D99016;
  --warn-text: #8A5A05;
  --crit: #CE3F4F;

  --blue-soft: #E8F0FF;
  --cyan-soft: #E3F6FA;
  --ok-soft: #E6F4EF;
  --warn-soft: #FBF1DE;
  --crit-soft: #FBE7EA;

  /* ---- legacy aliases (do not use in new CSS) ---- */
  --bg: var(--canvas);
  --ink: var(--text);
  --muted: var(--text-2);
  --card: var(--surface);
  --line: var(--hairline);
  --teal: var(--blue);
  --gold: var(--blue-deep);
  --gold-text: var(--blue-deep);
  --green: var(--ok);
  --amber: var(--warn);
  --amber-text: var(--warn-text);
  --red: var(--crit);
  --teal-soft: var(--blue-soft);
  --gold-soft: var(--surface-2);
  --green-soft: var(--ok-soft);
  --amber-soft: var(--warn-soft);
  --red-soft: var(--crit-soft);
  --ink-soft: var(--surface-2);

  /* Typography: one mature grotesk does the work. */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;

  /* Spacing + shape */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --measure: 680px;
  --shadow: 0 1px 2px rgba(20, 34, 53, 0.04), 0 2px 8px rgba(20, 34, 53, 0.03);
  --shadow-lift: 0 8px 28px rgba(20, 34, 53, 0.10), 0 1px 2px rgba(20, 34, 53, 0.06);

  --tap: 44px;
  --focus: 0 0 0 3px rgba(23, 107, 255, 0.30);
  --ease: 180ms cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-mech: cubic-bezier(.4,0,.2,1);

  --rail-w: 232px;
  --topbar-h: 56px;
  --bottombar-h: 64px;
}