/* ============================================================
   vroomr design tokens — the single source of truth
   ============================================================
   Every colour, radius, shadow, control height and timing in the
   product resolves to a token here.

   The legacy --cl-* / --clc-* names are kept as aliases so the
   existing page stylesheets keep working, but they now all point
   at one scale. Before this file there were two brand purples
   (#5b41f5 and #593cfb), three inks and three radius systems.
   ============================================================ */

:root,
.cl-chrome,
.cl-home,
.cl-detail,
.vr-scope {
  /* ---- Brand ---------------------------------------------- */
  --v-accent: #593cfb;
  --v-accent-hover: #6d50ff;
  --v-accent-active: #4a2ee8;
  --v-accent-soft: #eeeaff;
  --v-accent-ink: #ffffff;

  /* ---- Ink / text ----------------------------------------- */
  --v-ink: #121214;
  --v-body: #231f20;
  --v-subtle: #414143;
  --v-muted: #59595b;
  --v-tertiary: #767677;
  --v-disabled-ink: #9a9a9d;

  /* ---- Surfaces ------------------------------------------- */
  --v-surface: #ffffff;
  --v-bg: #ffffff;
  --v-bg-muted: #f4f4f4;
  --v-fill: #f4f4f4;
  --v-fill-hover: #ebebeb;
  --v-fill-active: #e0e0e0;
  --v-overlay: rgba(18, 18, 20, 0.94);

  /* ---- Lines ---------------------------------------------- */
  --v-line: #e7e7e8;
  --v-border: #d0d0d0;
  --v-border-hover: #a0a0a0;

  /* ---- Status --------------------------------------------- */
  --v-pos-bg: #dcf7ea;
  --v-pos-ink: #0b7350;
  --v-warn-bg: #fff4d6;
  --v-warn-ink: #7a5200;
  --v-neg-bg: #fde8ec;
  --v-neg-ink: #b3123a;
  --v-info-bg: #e8efff;
  --v-info-ink: #1f4bb8;

  /* ---- Radii ---------------------------------------------- */
  --v-r-sm: 6px;
  --v-r: 8px;
  --v-r-md: 12px;
  --v-r-lg: 16px;
  --v-r-xl: 24px;
  --v-r-pill: 999px;

  /* ---- Elevation (measured from the Turo reference) ------- */
  --v-shadow-sm: 0 2px 4px rgba(35, 31, 32, 0.2), 0 0 1px rgba(35, 31, 32, 0.1);
  --v-shadow: 0 0 2px rgba(18, 18, 20, 0.05), 0 4px 8px rgba(18, 18, 20, 0.15);
  --v-shadow-lg: 0 12px 32px rgba(35, 31, 32, 0.18), 0 0 2px rgba(35, 31, 32, 0.06);

  /* ---- Control sizing ------------------------------------- */
  --v-h-sm: 32px;
  --v-h: 40px;
  --v-h-lg: 48px;

  /* ---- Type ----------------------------------------------- */
  --v-font: "DM Sans", Avenir, "Helvetica Neue", Helvetica, sans-serif;
  --v-fs-xs: 12px;
  --v-fs-sm: 14px;
  --v-fs: 16px;
  --v-fs-lg: 18px;

  /* ---- Motion + focus ------------------------------------- */
  --v-t: 140ms ease;
  --v-focus-ring: 0 0 0 3px rgba(89, 60, 251, 0.32);
  --v-focus-ring-inverse: 0 0 0 3px rgba(255, 255, 255, 0.55);

  /* ========================================================
     Legacy aliases — existing page CSS reads these names.
     Mapped here so all three stylesheets share one scale.
     ======================================================== */

  /* chrome */
  --clc-ink: var(--v-ink);
  --clc-line: var(--v-line);
  --clc-accent: var(--v-accent);

  /* shared / home / detail */
  --cl-ink: var(--v-ink);
  --cl-body: var(--v-body);
  --cl-subtle: var(--v-subtle);
  --cl-muted: var(--v-muted);
  --cl-line: var(--v-line);
  --cl-border: var(--v-border);
  --cl-fill: var(--v-fill);
  --cl-surface: var(--v-surface);
  --cl-bg: var(--v-bg);
  --cl-accent: var(--v-accent);
  --cl-accent-press: var(--v-accent-active);
  --cl-pos-bg: var(--v-pos-bg);
  --cl-pos-ink: var(--v-pos-ink);
  --cl-r: var(--v-r);
  --cl-r-lg: var(--v-r-md);
  --cl-radius: var(--v-r-lg);
  --cl-radius-lg: var(--v-r-xl);
  --cl-shadow: var(--v-shadow);
  --cl-shadow-sm: var(--v-shadow-sm);
}