/* Hallmark · macrostructure: custom-brief (client-specified structure) · tone: luxury / performance-automotive
 * theme: custom (vibe: "midnight carbon, motorsport red, editorial luxury") · paper oklch(16.8% 0.0015 264) · accent oklch(56% 0.215 23) #FE2F35 · warm · display: Cormorant Garamond (classical-serif, roman) + body: Montserrat (geometric-humanist)
 * diversification axes: paper-band dark / display-style classical-serif / accent-hue warm
 */

/* ==========================================================================
   Prestige Watercars — Design Tokens
   Single source of truth for color, type, space, radius and motion.
   Every value consumed elsewhere via var(--token-name). No raw hex/px in style.css.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Color — brand palette (client-supplied) + derived neutrals
     --------------------------------------------------------------------- */
  --color-bg: #0B0B0D;              /* base background, near-black */
  --color-bg-raised: #111113;       /* header/topbar surface before scroll */
  --color-surface: #141417;         /* cards / panels */
  --color-surface-2: #1B1B1F;       /* elevated panels, feature quote band */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-text: #F5F5F7;            /* primary text on dark */
  --color-text-muted: #C5C5CD;      /* secondary text on dark — lifted for readability */
  --color-text-faint: #6E6E78;      /* tertiary / disabled */

  --color-accent: #FE2F35;          /* client red — primary CTA, prices, icons */
  --color-accent-strong: #FF4D4D;   /* sparse highlight — hover glow, focus ring, underline */
  --color-accent-contrast: #FFFFFF; /* text on accent-filled surfaces */
  --color-accent-wash: rgba(254, 47, 53, 0.10);   /* faint tint background */
  --color-accent-wash-strong: rgba(255, 77, 77, 0.22); /* glow / shadow color */

  --color-focus-ring: #FF4D4D;

  /* ---------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', ui-sans-serif, system-ui, sans-serif;

  --weight-display-medium: 500;
  --weight-display-bold: 600;
  --weight-display-black: 700;
  --weight-body-regular: 400;
  --weight-body-medium: 500;
  --weight-body-semibold: 600;
  --weight-body-bold: 700;

  /* Fluid scale — clamp(min, preferred, max) */
  --text-hero: clamp(2.25rem, 1.5rem + 3.4vw, 6.5rem);
  --text-h2: clamp(2rem, 1.5rem + 2.2vw, 3.25rem);
  --text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --text-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;
  --text-nano: 0.6875rem;   /* product-card button labels (Order now / Learn more) */
  --text-quote: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);

  --line-tight: 1.08;
  --line-snug: 1.25;
  --line-normal: 1.5;
  --line-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-widest: 0.12em;

  /* ---------------------------------------------------------------------
     Spacing — 8px base scale
     --------------------------------------------------------------------- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --space-9: 160px;

  /* ---------------------------------------------------------------------
     Radius — squircled corners
     --------------------------------------------------------------------- */
  --radius-sm: 12px;
  --radius-md: 10px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     Elevation
     --------------------------------------------------------------------- */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 28px 56px -20px var(--color-accent-wash-strong);
  --shadow-header-scrolled: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 32px -16px rgba(0, 0, 0, 0.55);

  /* ---------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast: 150ms;
  --dur-base: 260ms;
  --dur-slow: 420ms;

  /* ---------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------- */
  --container-max: 1360px;
  --container-max-wide: 1800px; /* header, models, features — fluid near-full-width sections */
  --container-pad: clamp(20px, 5vw, 64px);
  --header-h: 108px;
  --header-h-scrolled: 76px;
  --topbar-h: 40px;

  /* Header logo — base is 50% larger than the original 36px; scroll state is 35% smaller than base */
  --logo-h: 54px;
  --logo-scroll-scale: 0.65;

  /* Golden-ratio derived column width for hero/editorial copy blocks */
  --measure-golden: 61.8%;
  --measure-reading: 62ch;
}