/* Roadbuddy — design tokens
 * Source: roadbuddy-website-design/project/_ds/roadbuddy-design-system-*/tokens/
 * Brand = Deep Teal (#2A9D8F). Never reintroduce purple/indigo in UI. */

/* Plus Jakarta Sans — self-hosted variable font (GDPR: no external font CDN) */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/plus-jakarta-sans-var.woff2") format("woff2");
}

:root {
  /* ---- Base scales (raw triples) ---- */
  --background-hsl: 210 40% 98%;
  --foreground-hsl: 215 25% 20%;
  --card-hsl: 0 0% 100%;
  --card-foreground-hsl: 215 25% 20%;
  --popover-hsl: 0 0% 100%;
  --popover-foreground-hsl: 215 25% 20%;
  --surface-hsl: 0 0% 100%;
  --surface-foreground-hsl: 215 25% 20%;

  --primary-hsl: 173 58% 39%;
  --primary-foreground-hsl: 0 0% 100%;
  --primary-hover-hsl: 173 58% 33%;

  --secondary-hsl: 166 76% 97%;
  --secondary-foreground-hsl: 173 58% 30%;

  --muted-hsl: 210 40% 96%;
  --muted-foreground-hsl: 215 16% 47%;

  --accent-hsl: 173 30% 93%;
  --accent-foreground-hsl: 215 25% 20%;

  --success-hsl: 160 84% 39%;
  --success-foreground-hsl: 0 0% 100%;
  --warning-hsl: 32 95% 44%;
  --warning-foreground-hsl: 0 0% 100%;
  --destructive-hsl: 0 84% 60%;
  --destructive-foreground-hsl: 0 0% 100%;

  --border-hsl: 214 32% 91%;
  --input-hsl: 213 27% 84%;
  --input-well-hsl: 210 40% 96%;
  --ring-hsl: 173 58% 39%;

  /* ---- Ready-to-use color values ---- */
  --background: hsl(var(--background-hsl));       /* #F8FAFC — app canvas */
  --foreground: hsl(var(--foreground-hsl));       /* #26303D — primary text */
  --card: hsl(var(--card-hsl));
  --card-foreground: hsl(var(--card-foreground-hsl));
  --popover: hsl(var(--popover-hsl));
  --popover-foreground: hsl(var(--popover-foreground-hsl));
  --surface: hsl(var(--surface-hsl));             /* #FFFFFF — white surface layer */
  --surface-foreground: hsl(var(--surface-foreground-hsl));

  --primary: hsl(var(--primary-hsl));             /* #2A9D8F — brand teal */
  --primary-foreground: hsl(var(--primary-foreground-hsl));
  --primary-hover: hsl(var(--primary-hover-hsl)); /* #238378 */

  --secondary: hsl(var(--secondary-hsl));         /* #EEFBF6 — mint tint */
  --secondary-foreground: hsl(var(--secondary-foreground-hsl));

  --muted: hsl(var(--muted-hsl));                 /* #F1F5F9 — well */
  --muted-foreground: hsl(var(--muted-foreground-hsl)); /* #64748B — meta text */

  --accent: hsl(var(--accent-hsl));               /* #E2EFED — teal-tinted hover */
  --accent-foreground: hsl(var(--accent-foreground-hsl));

  --success: hsl(var(--success-hsl));             /* #10B981 */
  --success-foreground: hsl(var(--success-foreground-hsl));
  --warning: hsl(var(--warning-hsl));             /* #DB7706 */
  --warning-foreground: hsl(var(--warning-foreground-hsl));
  --destructive: hsl(var(--destructive-hsl));     /* #EF4444 */
  --destructive-foreground: hsl(var(--destructive-foreground-hsl));

  --border: hsl(var(--border-hsl));               /* #E2E8F0 */
  --input: hsl(var(--input-hsl));                 /* #CBD5E1 — input border */
  --input-well: hsl(var(--input-well-hsl));       /* #F1F5F9 — input fill */
  --ring: hsl(var(--ring-hsl));                   /* teal focus ring */

  /* ---- Brand ---- */
  --brand-ink: hsl(215 40% 22%);                  /* #21324a navy wordmark */

  /* ---- Typography ---- */
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-none: 1;
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;

  /* ---- Radius / spacing / shadows ---- */
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --shadow-card: 0px 1px 3px rgba(0,0,0,0.04), 0px 4px 20px rgba(0,0,0,0.05);
  --shadow-card-hover: 0px 2px 6px rgba(0,0,0,0.06), 0px 8px 30px rgba(0,0,0,0.08);
  --shadow-modal: 0 25px 50px -12px rgba(0,0,0,0.15);
  --shadow-dropdown: 0 10px 40px -8px rgba(0,0,0,0.12), 0 4px 16px -4px rgba(0,0,0,0.08);

  --container-max: 1400px;
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

/* ---- Base element resets ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; }