/* ==========================================================================
   Design Tokens — Ian McIvor
   A dark, firelit editorial palette: the page itself reads like the deep
   shadow around a campfire. Photography carries the story at full size,
   directly on that dark ground; the cream surface is reserved for the one
   place it earns genuine contrast — the press kit's printed document list.
   ========================================================================== */

:root {
  /* Color: page surfaces (dark) */
  --color-bg: #1f1f1d;
  --color-bg-secondary: #2c241e;
  --color-bg-accent: #3a312b;

  /* Color: the one light surface on the site — reserved for the press kit's
     printed document list, where cream-on-dark reads as real contrast */
  --color-card: #f4efe7;

  /* Color: text */
  --color-text-on-dark: #f7f4ee;
  --color-text-on-dark-soft: #c9c0b2;
  --color-text-on-dark-faint: #948a7c;
  --color-text-on-light: #2b2622;
  --color-text-on-light-soft: #6b5f52;

  /* Color: accents */
  --color-accent: #b68a4c;
  --color-button: #5c4434;
  --color-button-hover: #7a5a3a;

  /* Borders: extremely subtle — low-opacity warm gray, never black/white */
  --color-border-on-dark: rgba(247, 244, 238, 0.1);
  --color-border-on-light: rgba(43, 38, 34, 0.1);

  /* Typography — Fraunces is the brand's voice: a handcrafted, editorial
     display serif with real personality, never mistaken for a template
     font. Manrope carries everything functional (body, nav, buttons) with
     a warm but confident geometric feel — never corporate/SaaS-flavored. */
  --font-display: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Type scale — large and confident; the hero title should carry the
     weight of a magazine cover line, not a typical website headline. */
  --fs-hero: clamp(4rem, 4.25rem + 7vw, 10rem);
  --fs-h1: clamp(3rem, 2.5rem + 2.6vw, 4.875rem);
  --fs-h2: clamp(2.5rem, 2.1rem + 1.8vw, 3.75rem);
  --fs-h3: 1.875rem;
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.45vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.08;
  --lh-normal: 1.7;

  --tracking-wide: 0.14em;
  --tracking-mid: 0.06em;

  /* Spacing scale — roughly 20% more generous throughout; luxury layouts
     are unhurried, and nothing here should feel crowded. */
  --space-3xs: 0.3rem;
  --space-2xs: 0.6rem;
  --space-xs: 0.9rem;
  --space-sm: 1.5rem;
  --space-md: 2.75rem;
  --space-lg: 4.75rem;
  --space-xl: 8.5rem;
  --space-2xl: 12rem;

  /* Layout */
  --max-width: 1280px;
  --max-width-narrow: 720px;
  --gutter: clamp(1.5rem, 5vw, 5rem);

  /* Motion — slow, deliberate fades rather than snappy UI transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.3s;
  --duration: 0.85s;

  /* Elevation — soft, warm, and dark; cards read as objects lifted off
     the page rather than boxes with hard edges */
  --shadow-card: 0 20px 45px -20px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 28px 60px -24px rgba(0, 0, 0, 0.6);

  /* Radius */
  --radius-sm: 3px;
  --radius-card: 10px;
}