/* =========================================================
   Design tokens — the single source of truth for brand styling.
   Homepage values are the reference. Breakpoints (for reference —
   CSS custom properties cannot be used inside media queries):
     1099px  header collapses to the mobile menu
      991px  tablet: 3–4 column grids become 2 columns
      767px  mobile: grids stack, heights become content-driven
      575px  small mobile: button groups stack, nowrap released
   Fluid sizing: spacing and type scale with the viewport and reach
   the approved desktop value exactly at 1280px and above.
   ========================================================= */
:root {
  /* Brand (from the ZP Display logo) */
  --brand: #A72124;
  --brand-hover: #861A1D;
  --brand-ink: #D04D50;

  /* Surfaces */
  --color-bg: #050505;
  --color-surface: #0A0A0B;
  --color-surface-sunken: #08080A;
  --color-surface-raised: #101013;
  --color-white: #FFFFFF;

  /* Text ramp, strongest to faintest */
  --color-text-strong: #F7F5F2;
  --color-text: #F4F2EF;
  --color-text-soft: #E8E6E3;
  --color-text-2: #D6D4D1;
  --color-text-3: #BAB7B2;
  --color-text-4: #ACA8A3;
  --color-text-muted: #A29E98;
  --color-text-subtle: #918C86;
  --color-text-quiet: #87827C;
  --color-text-faint: #7B766F;
  --color-text-dim: #68635C;
  --color-text-dimmer: #615C55;
  --color-text-ghost: #534E47;
  --color-numeral: #2E2A26;
  --color-error: #E06A6C;

  /* Hairlines */
  --line-1: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.09);
  --line-3: rgba(255, 255, 255, 0.12);
  --line-4: rgba(255, 255, 255, 0.14);
  --line-5: rgba(255, 255, 255, 0.2);
  --line-strong: rgba(255, 255, 255, 0.42);

  /* Typography */
  --font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(20px, 4.6875vw, 60px);
  --header-h: 88px;

  /* Shape */
  --radius-card: 2px;
  --radius-btn: 8px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 900ms;

  /* Layers */
  --z-mobile-cta: 80;
  --z-header: 90;
  --z-menu: 200;
  --z-skip: 300;
}

@media (max-width: 767px) {
  :root { --header-h: 62px; }
}