/* Billej — "Showroom quiet".
 *
 * Warm off-white paper, near-black ink, and ONE signal colour: a deep petrol
 * blue that appears on exactly three things — the primary CTA, the active
 * filter chip, and the "booked" state. Everything else is paper, ink and
 * photography. The cars carry the colour; the interface does not compete with
 * them.
 *
 * Surfaces are separated by 1px hairline borders, not drop shadows, so every
 * shadow token below is deliberately flat: tiny blur, very low alpha. Shadows
 * are reserved for genuinely floating layers (dropdowns, dialogs, the sticky
 * price bar).
 *
 * `--plate` is the near-black ground every car photograph sits on. It is a
 * fixed value in BOTH modes on purpose: a white car and a black car have to
 * read on the same background, and a plate that inverted with the theme would
 * make half the fleet disappear in one of them.
 *
 * The `*-hover` pair exists because an opacity hover (`bg-primary/90`) blends
 * the button toward whatever is behind it — which *lightens* it on the warm
 * paper ground and darkens it on the dark one. A press should read the same way
 * in both modes, so the hover is a real colour: one step darker in light, one
 * step lighter in dark. */
:root {
  --background: oklch(0.978 0.003 85);
  --foreground: oklch(0.19 0.004 60);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.19 0.004 60);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.19 0.004 60);
  --primary: oklch(0.42 0.068 218);
  --primary-hover: oklch(0.355 0.072 218);
  --primary-foreground: oklch(0.985 0.003 85);
  --secondary: oklch(0.952 0.005 85);
  --secondary-hover: oklch(0.921 0.006 85);
  --secondary-foreground: oklch(0.19 0.004 60);
  --muted: oklch(0.952 0.005 85);
  --muted-foreground: oklch(0.49 0.008 60);
  --accent: oklch(0.93 0.022 218);
  --accent-foreground: oklch(0.32 0.055 218);
  --destructive: oklch(0.55 0.19 27);
  --destructive-foreground: oklch(0.985 0.003 85);
  --border: oklch(0.896 0.004 60);
  --input: oklch(0.896 0.004 60);
  --ring: oklch(0.42 0.068 218);
  /* green → teal → sand → clay → slate */
  --chart-1: oklch(0.42 0.068 218);
  --chart-2: oklch(0.58 0.075 205);
  --chart-3: oklch(0.72 0.06 85);
  --chart-4: oklch(0.62 0.105 45);
  --chart-5: oklch(0.52 0.02 250);
  --sidebar: oklch(1 0 0);
  --sidebar-foreground: oklch(0.19 0.004 60);
  --sidebar-primary: oklch(0.42 0.068 218);
  --sidebar-primary-foreground: oklch(0.985 0.003 85);
  --sidebar-accent: oklch(0.93 0.022 218);
  --sidebar-accent-foreground: oklch(0.32 0.055 218);
  --sidebar-border: oklch(0.896 0.004 60);
  --sidebar-ring: oklch(0.42 0.068 218);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  /* No serif display face in this design — serif resolves to the same stack. */
  --font-serif: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.05;
  --shadow-color: oklch(0.19 0.004 60);
  --shadow-2xs: 0px 1px 1px 0px oklch(0.19 0.004 60 / 0.02);
  --shadow-xs: 0px 1px 2px 0px oklch(0.19 0.004 60 / 0.03);
  --shadow-sm:
    0px 1px 2px 0px oklch(0.19 0.004 60 / 0.04),
    0px 1px 1px -1px oklch(0.19 0.004 60 / 0.03);
  --shadow:
    0px 1px 3px 0px oklch(0.19 0.004 60 / 0.05),
    0px 1px 2px -1px oklch(0.19 0.004 60 / 0.03);
  --shadow-md:
    0px 2px 6px -1px oklch(0.19 0.004 60 / 0.06),
    0px 1px 3px -1px oklch(0.19 0.004 60 / 0.04);
  --shadow-lg:
    0px 4px 12px -2px oklch(0.19 0.004 60 / 0.07),
    0px 2px 6px -2px oklch(0.19 0.004 60 / 0.04);
  --shadow-xl:
    0px 8px 20px -4px oklch(0.19 0.004 60 / 0.09),
    0px 3px 8px -3px oklch(0.19 0.004 60 / 0.05);
  --shadow-2xl: 0px 12px 28px -6px oklch(0.19 0.004 60 / 0.12);
  --plate: oklch(0.17 0.004 60);
  /* The hairline drawn *inside* the plate's own edge. Fixed in both modes for
   * the same reason `--plate` is: it sits on the photograph's ground, not on a
   * themed surface. In dark mode it is the only thing separating a near-black
   * plate from the near-black card it sits in. */
  --plate-edge: oklch(1 0 0 / 0.08);
  /* Every car photograph is held off the plate's edge by this much, measured
   * against the plate's *width* so the margin stays optically square at 16:10
   * (see `car-plate.tsx`). It is what makes a fleet of mixed source crops read
   * as one considered grid rather than as an accident. */
  --plate-inset: 5%;
  --tracking-normal: -0.01em;
  --spacing: 0.25rem;
}

html[data-theme="dark"] {
  --background: oklch(0.165 0.004 60);
  --foreground: oklch(0.945 0.003 85);
  --card: oklch(0.205 0.005 60);
  --card-foreground: oklch(0.945 0.003 85);
  --popover: oklch(0.225 0.005 60);
  --popover-foreground: oklch(0.945 0.003 85);
  --primary: oklch(0.74 0.085 218);
  --primary-hover: oklch(0.805 0.082 218);
  --primary-foreground: oklch(0.165 0.004 60);
  --secondary: oklch(0.25 0.005 60);
  --secondary-hover: oklch(0.3 0.006 60);
  --secondary-foreground: oklch(0.945 0.003 85);
  --muted: oklch(0.25 0.005 60);
  --muted-foreground: oklch(0.7 0.006 60);
  --accent: oklch(0.29 0.03 218);
  --accent-foreground: oklch(0.945 0.003 85);
  --destructive: oklch(0.65 0.185 27);
  --destructive-foreground: oklch(0.98 0.004 95);
  --border: oklch(0.29 0.005 60);
  --input: oklch(0.29 0.005 60);
  --ring: oklch(0.74 0.085 218);
  --chart-1: oklch(0.74 0.085 218);
  --chart-2: oklch(0.71 0.085 205);
  --chart-3: oklch(0.8 0.06 85);
  --chart-4: oklch(0.72 0.11 45);
  --chart-5: oklch(0.68 0.02 250);
  --sidebar: oklch(0.205 0.005 60);
  --sidebar-foreground: oklch(0.945 0.003 85);
  --sidebar-primary: oklch(0.74 0.085 218);
  --sidebar-primary-foreground: oklch(0.165 0.004 60);
  --sidebar-accent: oklch(0.29 0.03 218);
  --sidebar-accent-foreground: oklch(0.945 0.003 85);
  --sidebar-border: oklch(0.29 0.005 60);
  --sidebar-ring: oklch(0.74 0.085 218);
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-serif: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  --radius: 0.625rem;
  --shadow-x: 0px;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.22;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0px 1px 1px 0px oklch(0 0 0 / 0.14);
  --shadow-xs: 0px 1px 2px 0px oklch(0 0 0 / 0.18);
  --shadow-sm:
    0px 1px 2px 0px oklch(0 0 0 / 0.22), 0px 1px 1px -1px oklch(0 0 0 / 0.16);
  --shadow:
    0px 1px 3px 0px oklch(0 0 0 / 0.26), 0px 1px 2px -1px oklch(0 0 0 / 0.18);
  --shadow-md:
    0px 2px 6px -1px oklch(0 0 0 / 0.3), 0px 1px 3px -1px oklch(0 0 0 / 0.2);
  --shadow-lg:
    0px 4px 12px -2px oklch(0 0 0 / 0.34), 0px 2px 6px -2px oklch(0 0 0 / 0.22);
  --shadow-xl:
    0px 8px 20px -4px oklch(0 0 0 / 0.4), 0px 3px 8px -3px oklch(0 0 0 / 0.26);
  --shadow-2xl: 0px 12px 28px -6px oklch(0 0 0 / 0.48);
}

@theme inline {
  --color-background: var(--background);
  /* The fixed near-black ground every car photograph sits on. */
  --color-plate: var(--plate);
  --color-plate-edge: var(--plate-edge);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-hover: var(--secondary-hover);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --shadow-2xs: var(--shadow-2xs);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow: var(--shadow);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --shadow-2xl: var(--shadow-2xl);
}