/**
 * Global design tokens and base styles (loaded before frontend.css via app.js).
 *
 * Single source of truth for the AllCarsListed design system. The token set
 * mirrors the "AllCarsListed Design System" project (colors, typography, layout,
 * hero); component styles in frontend.css consume these tokens. Bootstrap 5.3.3
 * utilities remain and are themed through the --bs-* bridge at the bottom.
 */
:root {
  /* ---- Surfaces ---- */
  --app-bg: #f1f5f9;              /* page background (slate-100) */
  --app-surface: #ffffff;         /* cards, navbar, panels */
  --app-surface-muted: #f8fafc;   /* subtle fills, breadcrumb bar (slate-50) */
  --app-surface-elevated: #ffffff;

  /* ---- Text ---- */
  --app-text: #0f172a;            /* headings & body (slate-900) */
  --app-text-secondary: #475569;  /* secondary copy (slate-600) */
  --app-text-muted: #64748b;      /* meta, captions (slate-500) */
  --app-text-inverse: #f8fafc;    /* text on dark hero / photos */

  /* ---- Brand / accent (sky blue) ---- */
  --app-accent: #2563eb;          /* links, active nav, focus (blue-600) */
  --app-accent-hover: #1d4ed8;    /* link hover (blue-700) */
  --app-accent-subtle: rgba(37, 99, 235, 0.12);
  --app-accent-ring: rgba(37, 99, 235, 0.35);
  --app-accent-tint: color-mix(in srgb, var(--btn-primary-bg) 4%, transparent); /* faint accent wash (featured surfaces) */

  /* ---- Button system ----
   * Primary buttons are a lighter sky-blue that darkens on hover/active —
   * distinct from the darker --app-accent used for links. */
  --btn-primary-bg: #60a5fa;      /* blue-400 */
  --btn-primary-hover: #3b82f6;   /* blue-500 */
  --btn-primary-active: #2563eb;  /* blue-600 */
  --btn-primary-text: #f8fbff;

  --btn-secondary-bg: #f1f5f9;
  --btn-secondary-hover: #e2e8f0;
  --btn-secondary-active: #cbd5e1;
  --btn-secondary-text: #0f172a;

  --btn-success-bg: #4ade80;      /* green-400 */
  --btn-success-hover: #22c55e;   /* green-500 */
  --btn-success-active: #16a34a;  /* green-600 */
  --btn-success-text: #f7fff9;

  --btn-outline-bg-hover: #f8fafc;
  --btn-outline-border: #dbe4ee;
  --btn-outline-text: #475569;

  --btn-subtle-bg: rgba(96, 165, 250, 0.16);
  --btn-subtle-hover: rgba(96, 165, 250, 0.24);
  --btn-subtle-text: #1d4ed8;

  /* ---- Semantic status ---- */
  --app-success: #22c55e;
  --app-success-badge: #00b894;       /* "New arrival" status pill */
  --app-warning: #f59e0b;
  --app-danger: #dc3545;
  --app-price: var(--btn-primary-bg); /* listing price color */

  /* ---- Borders & dividers ---- */
  --app-border: rgba(15, 23, 42, 0.08);
  --app-border-strong: rgba(15, 23, 42, 0.12);
  --app-divider: rgba(15, 23, 42, 0.06);

  /* ---- Shadows (soft, low-spread slate) ---- */
  --app-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --app-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.06);
  --app-shadow-md: 0 8px 28px rgba(15, 23, 42, 0.08);
  --app-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.1);
  /* Accent-tinted shadows for featured/promoted surfaces (sky-blue, not slate) */
  --app-shadow-accent-sm: 0 2px 6px color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
  --app-shadow-accent-md: 0 4px 18px color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);

  /* ---- Corner radius ----
   * Buttons are the odd one out at 0.65rem; everything else keys off this scale. */
  --app-radius-sm: 0.5rem;    /* inputs, small controls, thumbnails */
  --app-radius-md: 0.75rem;   /* cards, panels, dropdowns */
  --app-radius-lg: 1rem;      /* listing cards, welcome cards */
  --app-radius-pill: 9999px;  /* pills, search bar, badges */
  --app-radius-btn: 0.65rem;  /* Bootstrap button radius override */

  /* ---- Typography ----
   * Native system UI font stack — no custom webfont for on-screen text. The
   * shipped .ttf files are for server-side image/PDF overlays only. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-base: var(--font-sans);

  /* Type scale (rem). Body is 1rem/1.5; headings run tight. */
  --text-xs: 0.75rem;      /* tags, meta labels */
  --text-sm: 0.8125rem;    /* card specs, subtitles */
  --text-body-sm: 0.875rem;
  --text-body: 1rem;       /* base */
  --text-lg: 1.0625rem;    /* card titles */
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;      /* listing price */
  --text-3xl: 1.75rem;     /* plan price */
  --text-display: 2.25rem; /* hero H1 max */

  /* Weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Line heights */
  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --lh-body: 1.5;
  --lh-relaxed: 1.6;

  /* Letter spacing — headings run tight; labels run wide */
  --ls-tight: -0.02em;   /* display / hero / navbar brand */
  --ls-snug: -0.01em;    /* card & plan titles */
  --ls-wide: 0.01em;
  --ls-label: 0.04em;    /* uppercase eyebrow labels */
  --ls-caps: 0.06em;     /* uppercase contact labels */

  /* ---- Spacing (Bootstrap rem rhythm) ---- */
  --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-12: 3rem;

  /* ---- Layout rhythm ---- */
  --app-section-y: clamp(2.5rem, 5vw, 4rem);
  --app-container-narrow: 42rem;
  --app-container-max: 1400px;

  /* ---- Motion — fast, subtle, no bounces ---- */
  --ease-standard: ease;
  --dur-fast: 0.15s;
  --dur-btn: 0.16s;
  --dur-card: 0.2s;
  --dur-media: 0.35s;

  /* ---- Hero (overridable per section) ---- */
  --hero-gradient-start: #0f172a;
  --hero-gradient-mid: #1e3a5f;
  --hero-gradient-end: #0c4a6e;
  --hero-overlay-top: rgba(15, 23, 42, 0.45);
  --hero-overlay-mid: rgba(15, 23, 42, 0.5);
  --hero-overlay-bottom: rgba(15, 23, 42, 0.72);
  --hero-brand-panel-bg: rgba(255, 255, 255, 0.12);
  --hero-brand-panel-border: rgba(255, 255, 255, 0.22);
  --hero-brand-panel-hover: rgba(255, 255, 255, 0.2);
  --hero-search-surface: var(--app-surface);
  --hero-search-shadow: var(--app-shadow-md);

  /* ---- Focus (accessibility) ---- */
  --app-focus-ring: 0 0 0 3px var(--app-accent-ring);

  /* ---- Bootstrap bridge ---- */
  --bs-primary: var(--btn-primary-bg);
  --bs-primary-rgb: 96, 165, 250;
  --bs-secondary: #64748b;
  --bs-secondary-rgb: 100, 116, 139;
  --bs-success: var(--btn-success-bg);
  --bs-success-rgb: 74, 222, 128;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--app-bg);
  color: var(--app-text);
  font-family: var(--font-sans);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--app-accent);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--app-accent-hover);
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--app-accent);
  outline-offset: 2px;
}