/* Grip Garage - design tokens (contract: 01-design-spec.md §1).
   Motor City Pro. Values here are binding; palette roles are semantic. */
:root {
  /* palette */
  --paper: #FAF9F7;        /* light warm base */
  --ink: #14181C;          /* primary text */
  --graphite: #1C2127;     /* dark section bands + footer accents */
  --graphite-ink: #E8EAED; /* text on graphite (passes AA) */
  --brand: #7FB3DC;        /* card sky-blue: lines, icons, backgrounds ONLY (fails AA as text on paper) */
  --brand-deep: #2E5F86;   /* accessible dark derivative: links, secondary button, bold text (AA on paper + white) */
  --action: #1B72B8;       /* CTA only (saturated action blue, white text passes AA) */
  --line: #D9D5CE;         /* subtle dividers */
  --ok: #2E7D4F;
  --err: #B3261E;

  /* surfaces derived for depth */
  --paper-2: #FFFFFF;      /* pure white service band */
  --graphite-2: #232A31;   /* raised surface on graphite */
  --ink-2: #10141A;        /* deepest footer */

  /* type scale (clamp) */
  --text-hero: clamp(2.4rem, 1.2rem + 5.5vw, 4.75rem);
  --text-h2: clamp(1.7rem, 1.1rem + 2.2vw, 2.6rem);
  --text-h3: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-small: 0.875rem;
  --text-phone-xl: clamp(2rem, 1rem + 5vw, 3rem);

  /* rhythm / radius / easing */
  --space-section: clamp(4rem, 2.5rem + 5vw, 8rem);
  --wrap: 1200px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --radius-card: 10px;
  --radius-btn: 8px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-reveal: 450ms;

  /* shadows (restrained, motor-city solid) */
  --shadow-1: 0 1px 2px rgba(20, 24, 28, 0.06), 0 2px 8px rgba(20, 24, 28, 0.06);
  --shadow-2: 0 6px 20px rgba(20, 24, 28, 0.12);
}