/* =============================================================================
   Design tokens
   A single source of truth for colour, type, spacing, motion and elevation.
   The palette stays deliberately monochrome so that the project photography
   supplies the colour — mirroring the original studio's black-on-white language.
   ========================================================================== */

:root {
  /* ── Colour ─────────────────────────────────────────────────────────────── */
  --bg: #0a0a0b;
  --bg-elev: #111113;
  --bg-soft: #17171a;
  --bg-contrast: #f4f2ee;

  --fg: #f4f2ee;
  --fg-dim: rgba(244, 242, 238, 0.62);
  --fg-mute: rgba(244, 242, 238, 0.38);
  --fg-faint: rgba(244, 242, 238, 0.16);

  --line: rgba(244, 242, 238, 0.12);
  --line-strong: rgba(244, 242, 238, 0.24);

  --accent: #ff5533;
  --accent-soft: rgba(255, 85, 51, 0.14);

  --overlay: rgba(10, 10, 11, 0.72);
  --scrim: linear-gradient(180deg, rgba(10, 10, 11, 0.85) 0%, rgba(10, 10, 11, 0.25) 40%, rgba(10, 10, 11, 0.95) 100%);

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-hero: clamp(2.75rem, 9vw, 8rem);
  --fs-display: clamp(2.25rem, 5.4vw, 4.75rem);
  --fs-h1: clamp(1.875rem, 4vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2.375rem);
  --fs-h3: clamp(1.125rem, 1.5vw, 1.5rem);
  --fs-body: clamp(0.9375rem, 1.02vw, 1.0625rem);
  --fs-small: 0.8125rem;
  --fs-micro: 0.6875rem;

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-normal: 1.6;
  --lh-relaxed: 1.8;

  --ls-tight: -0.02em;
  --ls-label: 0.14em;
  --ls-wide: 0.24em;

  /* ── Space ──────────────────────────────────────────────────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  --section-y: clamp(4.5rem, 9vw, 9rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --container: 1680px;
  --container-narrow: 960px;

  --header-h: 76px;
  /* Height of the logo artwork in the header. The bundled lockup is 155x43. */
  --header-logo-h: 43px;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 10px;

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  /* ── Depth ──────────────────────────────────────────────────────────────── */
  --z-base: 1;
  --z-header: 100;
  --z-menu: 200;
  --z-progress: 300;

  --shadow-soft: 0 18px 50px -22px rgba(0, 0, 0, 0.9);
  --shadow-card: 0 30px 70px -40px rgba(0, 0, 0, 1);
}

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