/*
 * Design tokens, taken from the Figma variables on the DHT Part Slicer file.
 * The palette and scales are Tailwind/shadcn neutrals; the two brand colours
 * come from the Daihatsu logo.
 *
 * Light only, deliberately: the design has no dark variants, so a dark palette
 * would be invented rather than designed.
 */

:root {
  color-scheme: light;

  /* -- Palette -------------------------------------------------------- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-neutral-200: #e5e5e5;
  --color-neutral-500: #737373;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
  --color-zinc-50: #fafafa;
  --color-grey: #dfdfdf;

  /* Daihatsu brand, sampled from the logo artwork. */
  --color-brand-red: #e92327;
  --color-brand-blue: #3975bb;

  /* -- Semantic ------------------------------------------------------- */
  --background: var(--color-white);
  --foreground: var(--color-neutral-950);
  --card: var(--color-white);
  --card-foreground: var(--color-neutral-950);
  --muted: var(--color-zinc-50);
  --muted-foreground: var(--color-neutral-500);
  --border: var(--color-neutral-200);
  --input-border: var(--color-neutral-200);

  /* The call-to-action is a gradient, not a flat colour, and it is not the
     logo red — read off button node 3:2181. */
  --primary-gradient: linear-gradient(114.64deg, #e41a2c 13.46%, #ba062c 74.08%);
  --primary-foreground: var(--color-zinc-50);

  /* Inputs sit on their own grey, a raw fill in the design rather than one of
     the neutral tokens. */
  --input-bg: #f2f2f2;

  /* The transitional accent belongs to the pre-redesign Screens and is
     deleted with the last of them. */
  --legacy-accent: #2563eb;
  --legacy-accent-foreground: var(--color-white);

  /* Feedback colours are not in the Figma file; these are the existing
     tool's values, kept so warnings and errors stay legible. */
  --warn-bg: #fff8e1;
  --warn-border: #f0c419;
  --error-bg: #fdecea;
  --error-border: #e35d5d;

  /* -- Spacing (4px scale) -------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-10: 40px;
  --space-20: 80px;

  /* -- Radius --------------------------------------------------------- */
  --radius-input: 10px;
  --radius-xl: 12px;
  --radius-pill: 18px;
  --radius-3xl: 24px;

  /* -- Typography ----------------------------------------------------- */
  /* Geist is the design's typeface, self-hosted so no CDN is involved. The
     system stack is only a fallback for the moment before it loads. */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-xs: 12px;
  --leading-xs: 16px;
  --text-sm: 14px;
  --leading-sm: 20px;
  --text-base: 16px;
  --leading-base: 24px;
  --weight-normal: 400;
  --weight-medium: 500;

  /* -- Structure ------------------------------------------------------ */
  --border-width: 1px;
  --container-xl: 1280px;
  --container-md: 448px;
  --navbar-height: 72px;
}