/* CarLAB ui-v2 — design tokens.
   Namespaced --cl2-* throughout: zero collisions with the legacy :root
   variables in assets/carlab-analytics-shell.css (--text, --accent, --border,
   etc). Blocks rebuilt under ui-v2 must read only from these tokens — no
   arbitrary one-off colors, radii, spacing, or font sizes. */
:root {
  /* ── Surfaces / text ── */
  --cl2-white:       #ffffff;
  --cl2-surface:     #f8f9fa;
  --cl2-surface-2:   #f1f3f5;
  --cl2-border:      #e8eaed;
  --cl2-border-dark: #d1d5db;

  --cl2-text:       #111827;
  --cl2-text-muted: #6b7280;
  --cl2-text-dim:   #9ca3af;

  /* ── Accent ── */
  --cl2-accent:     #2563eb;
  --cl2-accent-dim: rgba(37, 99, 235, .08);
  --cl2-accent-mid: rgba(37, 99, 235, .15);

  /* ── Status (matches assets/carlab-charts.js's real bar colors exactly,
     so any HTML legend swatch never drifts from the canvas it describes) ── */
  --cl2-status-active:   #3f6b55;
  --cl2-status-inactive: #ffbf26;
  --cl2-status-final:    #f4486b;

  /* ── Typography ── */
  --cl2-font-sans:        "Assistant", "Heebo", "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif;
  --cl2-font-mono:        "Assistant", Arial, "Helvetica Neue", sans-serif;
  --cl2-font-logo:        "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --cl2-font-logo-accent: "Pixelify Sans", system-ui, sans-serif;

  --cl2-fs-3xs: 9px;
  --cl2-fs-2xs: 10px;
  --cl2-fs-xs:  11px;
  --cl2-fs-sm:  12.5px;
  --cl2-fs-md:  13.5px;
  --cl2-fs-lg:  15px;
  --cl2-fs-2xl: 20px;
  --cl2-fs-xl:  28px;
  --cl2-fs-logo:        21px;
  --cl2-fs-logo-accent: 23px;

  /* ── Spacing (4px rhythm) ── */
  --cl2-space-2xs: 2px;
  --cl2-space-xs:  4px;
  --cl2-space-sm:  8px;
  --cl2-space-md:  12px;
  --cl2-space-lg:  16px;
  --cl2-space-xl:  20px;
  --cl2-space-2xl: 24px;
  --cl2-space-3xl: 32px;
  --cl2-space-4xl: 48px;

  /* ── Radius / shadow ── */
  --cl2-radius-sm:   4px;
  --cl2-radius-md:   8px;
  --cl2-radius-lg:   12px;
  --cl2-radius-pill: 999px;

  --cl2-shadow-sm:         0 1px 2px rgba(17, 24, 39, .05);
  --cl2-shadow-md:         0 3px 10px rgba(17, 24, 39, .08);
  --cl2-shadow-lg:         0 12px 30px rgba(17, 24, 39, .14);
  --cl2-shadow-focus-ring: 0 0 0 3px var(--cl2-accent-dim);

  /* ── Layout ── */
  --cl2-container-max:   1280px;
  --cl2-header-h:         76px;
  --cl2-header-h-compact: 60px;
  --cl2-chart-frame-h:   280px;

  /* ── Motion ── */
  --cl2-ease:     cubic-bezier(.4, 0, .2, 1);
  --cl2-t-fast:   120ms;
  --cl2-t-medium: 180ms;
}