/* ==========================================================================
   Platinum Shine Mobile Detailing: design tokens.
   Direction: "Showroom at night". A graphite ground that makes paint and
   chrome read like a car under studio lights, silver for ink and metal,
   gold reserved for the one action (book) and one accent word.
   Adapted from the Web Inspiration shelf: Cinematic Editorial (condensed
   uppercase display, type over image) + Dark Studio (one reserved accent,
   glass chips over media, cropped headline).
   Contrast (WCAG 2.2 AA), measured against --color-bg:
     ink 16.4:1 · muted 8.2:1 (7.7:1 on surface) · accent 10.8:1
     accent-ink on accent 10.2:1 · silver-ink on silver 14.1:1 · gold-deep on silver 5.1:1
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- Colour ---- */
  --color-bg:         oklch(15.5% 0.006 260);   /* graphite */
  --color-surface:    oklch(19.5% 0.007 260);
  --color-surface-2:  oklch(24% 0.008 260);
  --color-ink:        oklch(94% 0.004 260);     /* polished silver */
  --color-muted:      oklch(73% 0.008 260);
  --color-line:       oklch(31% 0.008 260);
  --color-accent:     oklch(81% 0.115 85);      /* gold */
  --color-accent-ink: oklch(19% 0.03 80);
  --color-inverse:    oklch(91% 0.004 260);     /* silver bands */
  --color-inverse-ink:oklch(19% 0.008 260);
  --color-gold-deep:  oklch(48% 0.095 78);      /* gold text on silver */
  --color-glass:      oklch(19% 0.007 260 / 0.62);

  /* Metallic finishes: used for the wordmark, one headline word and hairlines */
  --finish-silver: linear-gradient(100deg, oklch(70% 0.008 260) 0%, oklch(98% 0.003 260) 28%, oklch(76% 0.008 260) 52%, oklch(96% 0.003 260) 74%, oklch(68% 0.008 260) 100%);
  --finish-gold:   linear-gradient(100deg, oklch(66% 0.11 78) 0%, oklch(92% 0.09 90) 30%, oklch(74% 0.12 80) 55%, oklch(90% 0.09 88) 78%, oklch(64% 0.1 76) 100%);

  /* ---- Type ---- */
  --font-display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body:    "Manrope", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --weight-body: 400;
  --weight-strong: 600;
  --weight-display: 800;
  --tracking-display: 0.005em;
  --tracking-eyebrow: 0.2em;

  /* Fluid scale 360 → 1440. Display steps run larger than the starter
     because the condensed face sets narrow: an 8-word headline still fits 360px. */
  --step--2: clamp(0.694rem, 0.686rem + 0.038vw, 0.720rem);
  --step--1: clamp(0.833rem, 0.811rem + 0.099vw, 0.900rem);
  --step-0:  clamp(1.000rem, 0.958rem + 0.185vw, 1.125rem);
  --step-1:  clamp(1.200rem, 1.131rem + 0.306vw, 1.406rem);
  --step-2:  clamp(1.440rem, 1.334rem + 0.471vw, 1.758rem);
  --step-3:  clamp(1.728rem, 1.572rem + 0.695vw, 2.197rem);
  --step-4:  clamp(2.074rem, 1.849rem + 0.997vw, 2.747rem);
  --step-5:  clamp(2.625rem, 2.000rem + 2.778vw, 4.500rem);
  --step-6:  clamp(3.000rem, 2.167rem + 3.704vw, 5.500rem);
  --step-7:  clamp(3.375rem, 2.250rem + 5.000vw, 6.750rem);
  --step-giant: clamp(7rem, 3rem + 20vw, 20rem);

  --leading-tight: 0.92;
  --leading-snug:  1.1;
  --leading-body:  1.65;
  --measure: 62ch;

  /* ---- Fluid space scale (unchanged from the starter) ---- */
  --space-3xs: clamp(0.250rem, 0.240rem + 0.046vw, 0.281rem);
  --space-2xs: clamp(0.500rem, 0.479rem + 0.093vw, 0.562rem);
  --space-xs:  clamp(0.750rem, 0.719rem + 0.139vw, 0.844rem);
  --space-s:   clamp(1.000rem, 0.958rem + 0.185vw, 1.125rem);
  --space-m:   clamp(1.500rem, 1.438rem + 0.278vw, 1.688rem);
  --space-l:   clamp(2.000rem, 1.917rem + 0.370vw, 2.250rem);
  --space-xl:  clamp(3.000rem, 2.875rem + 0.556vw, 3.375rem);
  --space-2xl: clamp(4.000rem, 3.833rem + 0.741vw, 4.500rem);
  --space-3xl: clamp(6.000rem, 5.750rem + 1.111vw, 6.750rem);

  --space-section: clamp(4.500rem, 2.833rem + 7.407vw, 9.500rem);
  --gutter:        clamp(1rem, 0.333rem + 2.963vw, 3rem);
  --container:     76rem;
  --container-narrow: 46rem;

  /* ---- Shape & depth: sharp-soft, like machined trim ---- */
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --radius-l: 0.875rem;
  --radius-pill: 999px;
  --shadow-s: 0 1px 2px oklch(0% 0 0 / 0.3);
  --shadow-m: 0 18px 40px -18px oklch(0% 0 0 / 0.7);
  --glow-gold: 0 10px 34px -10px oklch(81% 0.115 85 / 0.55);

  /* ---- Motion: calm / premium ---- */
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --dur-reveal: 1000ms;
  --dur-sheen: 2400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --reveal-distance: 1.25rem;
  --stagger: 80ms;
}