/* ==========================================================================
   Design tokens — the single source of truth for colour, type, space,
   radius and motion. Change a value here and the whole site follows.
   ========================================================================== */

:root {
  /* --- Brand palette ------------------------------------------------------
     Stored as channel triplets so every translucent variant below stays
     derived from one value instead of a hand-copied rgba(). */
  --color-accent-rgb: 242 158 24;
  --color-ink-rgb: 38 38 38;
  --color-text-rgb: 236 232 224;
  --color-strong-rgb: 244 241 234;

  --color-accent: rgb(var(--color-accent-rgb));
  --color-accent-dark: #b87506;
  --color-accent-rule: rgb(var(--color-accent-rgb) / 0.22);
  --color-link-hover: #ffc45e;

  /* --- Surfaces --- */
  --color-bg: #232323;
  --color-surface: #2c2c2c;
  --color-border: #414141;

  /* --- Text on dark surfaces --- */
  --color-text: rgb(var(--color-text-rgb));
  --color-text-strong: rgb(var(--color-strong-rgb));
  --color-text-muted: rgb(var(--color-text-rgb) / 0.7);
  --color-text-soft: rgb(var(--color-text-rgb) / 0.62);
  --color-text-subtle: rgb(var(--color-text-rgb) / 0.45);
  --color-text-faint: rgb(var(--color-text-rgb) / 0.4);
  --color-placeholder: #7a7671;

  /* --- Text on the orange bands --- */
  --color-on-accent: rgb(var(--color-ink-rgb));
  --color-on-accent-strong: rgb(var(--color-ink-rgb) / 0.85);
  --color-on-accent-muted: rgb(var(--color-ink-rgb) / 0.78);
  --color-on-accent-soft: rgb(var(--color-ink-rgb) / 0.7);

  /* --- Hairlines --- */
  --color-rule: rgb(var(--color-strong-rgb) / 0.16);
  --color-rule-soft: rgb(var(--color-strong-rgb) / 0.12);

  /* --- Overlay --- */
  /* Ink wash over the blurred page behind the lightbox */
  --color-overlay: rgb(var(--color-ink-rgb) / 0.74);

  /* --- Typography ---------------------------------------------------------
     fs-100 → fs-900 is the static ramp; the fs-display/h2/h3 tokens are
     fluid and drive every oversized editorial heading. */
  --font-sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-100: 0.66rem;
  --fs-200: 0.7rem;
  --fs-300: 0.75rem;
  --fs-400: 0.82rem;
  --fs-500: 0.92rem;
  --fs-600: 1rem;
  --fs-700: 1.12rem;
  --fs-800: 1.25rem;
  --fs-900: 1.4rem;

  /* The floor of each ramp is what a 320–420px phone actually gets: the vw
     term only takes over further up, so these minimums must stay small
     enough that the longest word in a heading still fits the gutter. */
  --fs-display: clamp(2.1rem, 9.5vw, 8.6rem);
  --fs-h2: clamp(1.6rem, 5vw, 4rem);
  --fs-h2-lg: clamp(1.75rem, 6vw, 4.8rem);
  --fs-h2-sm: clamp(1.55rem, 4.5vw, 3.8rem);
  --fs-h3: clamp(1.35rem, 3.6vw, 2.9rem);
  --fs-lead: clamp(1.02rem, 1.4vw, 1.25rem);
  --fs-marquee: clamp(1.5rem, 2.8vw, 2.5rem);
  --fs-numeral: clamp(1.6rem, 2.6vw, 2.4rem);
  --fs-numeral-lg: clamp(3rem, 5vw, 4.4rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  --lh-display: 0.93;
  --lh-numeral: 0.9;
  --lh-tight: 0.95;
  --lh-snug: 1;
  --lh-body: 1.55;
  --lh-normal: 1.6;

  --tracking-wide: 0.3em;
  --tracking-label: 0.22em;
  --tracking-tag: 0.18em;
  --tracking-brand: 0.08em;
  --tracking-tight: -0.01em;
  --tracking-tighter: -0.015em;
  --tracking-tightest: -0.04em;

  /* Width of the transparent-fill outline lettering */
  --stroke-thin: 1.4px;
  --stroke: 2px;
  --stroke-thick: 2.5px;
  --stroke-hero: 3px;

  /* --- Space: static ramp --- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;

  /* --- Space: fluid page rhythm --- */
  --gutter: min(6vw, 64px);
  --gutter-tight: min(4vw, 40px);
  --gutter-inner: min(5vw, 56px);

  --section-py: clamp(60px, 10vh, 116px);
  --section-py-sm: clamp(44px, 7vh, 80px);
  --section-py-lg: clamp(46px, 8vh, 88px);

  --gap-grid: clamp(16px, 2vw, 26px);
  --gap-cols: clamp(28px, 4vw, 60px);
  --gap-cols-lg: clamp(36px, 5vw, 80px);
  --gap-marquee: clamp(26px, 3vw, 46px);
  --gap-steps: clamp(24px, 3vw, 48px);
  --gap-service: clamp(18px, 3vw, 44px);
  --gap-service-heading: clamp(14px, 2vw, 28px);

  --heading-mb: clamp(30px, 5vh, 48px);
  --heading-mb-lg: clamp(36px, 6vh, 60px);

  /* --- Radius --- */
  /* The brand mark is an even rounded square; the favicon repeats it as
     rx="9" on a 32px tile, so keep the two proportional if this changes. */
  --radius-mark: 10px;
  --radius-mark-sm: 9px;

  --radius-sm: 14px;
  --radius-md: 28px;
  --radius-lg: 44px;
  --radius-pill: 100px;

  /* Asymmetric "leaf" corners used on photography */
  --blob-xs: 16px;
  --blob-sm: 20px;
  --blob-md: 70px;
  --blob-lg: 90px;
  --blob-hero: clamp(60px, 10vw, 140px);

  /* --- Motion --- */
  --marquee-duration: 32s;
  --transition-fast: 0.2s ease;

  /* --- Depth --- */
  /* Above .pattern (unlayered, fixed) and everything inside .page */
  --z-lightbox: 60;

  /* --- Component sizing --- */
  --brand-mark-size: 34px;
  --brand-mark-size-sm: 32px;
  --pattern-opacity: 0.13;
  --deco-opacity: 0.16;
  --deco-opacity-band: 0.15;
  --pattern-row-height: 200px;
  --blur-overlay: 18px;
  --service-media-width: minmax(180px, 220px);
  --tile-min: 240px;
  --col-min: 300px;
  --review-avatar-size: 44px;
  /* Lines of a review shown before js/reviews.js adds the "Read more" toggle */
  --review-clamp-lines: 5;
  --measure-lead: 42ch;
  --measure-text: 52ch;
  --measure-step: 32ch;
  --measure-quote: 38ch;
  --measure-footer: 30ch;
}