/* ==========================================================================
   Design Tokens — Single source of truth for all design values.
   Never hardcode colours, font sizes, or spacing elsewhere.
   ========================================================================== */

:root {
  /* === COLOURS (4 ONLY — NO EXCEPTIONS) === */
  --color-base: #F8F7F4;
  --color-primary: #1A1A1A;
  --color-secondary: #737373;
  --color-accent: #0D7C66;
  --color-accent-hover: #0A6350;
  --color-white: #FFFFFF;

  /* Derived (opacity variants — not new colours) */
  --color-divider: rgba(140, 140, 140, 0.2);
  --color-section-alt: #F3F1ED;
  --color-surface-hover: rgba(140, 140, 140, 0.04);

  /* === TYPOGRAPHY === */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Satoshi', 'Segoe UI', system-ui, sans-serif;

  --text-hero: 4.5rem;
  --text-h1: 3rem;
  --text-h2: 3rem;
  --text-h3: 1.5rem;
  --text-body: 1.125rem;
  --text-body-lg: 1.25rem;
  --text-small: 0.8125rem;
  --text-button: 0.9375rem;
  --text-nav: 0.9375rem;

  --leading-hero: 1.05;
  --leading-h1: 1.1;
  --leading-h2: 1.1;
  --leading-h3: 1.3;
  --leading-body: 1.65;
  --leading-small: 1.4;

  --tracking-tight: -0.02em;
  --tracking-slightly-tight: -0.01em;
  --tracking-normal: 0.01em;
  --tracking-wide: 0.06em;
  --tracking-button: 0.04em;

  /* === SPACING SCALE === */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
  --space-4xl: 120px;

  /* === GRID === */
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-max-width: 1200px;
  --grid-margin-desktop: 48px;
  --grid-margin-tablet: 24px;
  --grid-margin-mobile: 16px;

  /* === LAYOUT === */
  --body-max-width: 620px;
  --border-radius-button: 6px;
  --section-padding-desktop: var(--space-4xl);
  --section-padding-tablet: var(--space-3xl);
  --section-padding-mobile: 56px;
  --inner-hero-padding-top: 160px;

  /* === ANIMATION === */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 0.2s;
  --duration-medium: 0.3s;
  --duration-slow: 0.6s;
  --duration-reveal: 0.8s;
  --reveal-distance: 20px;
  --stagger-delay: 0.15s;
}