:root {
  /* Color — Bold Photographic, pulled from paigewoods.art, shifted cool:
     deep charcoal base, blue/teal mosaic texture, cool white type,
     teal-blue accent. */
  --color-bg: #1A2124;          /* base charcoal beneath the texture */
  --color-bg-deep: #12171A;
  --color-panel: rgba(255, 255, 255, 0.07);
  --color-panel-strong: rgba(255, 255, 255, 0.12);
  --color-panel-border: rgba(255, 255, 255, 0.16);
  --color-panel-border-strong: rgba(255, 255, 255, 0.28);

  --color-text: #F2F6F7;         /* cool white */
  --color-text-soft: rgba(242, 246, 247, 0.74);
  --color-text-faint: rgba(242, 246, 247, 0.5);

  --color-accent: #4FA3B8;       /* teal-blue — primary CTA color */
  --color-accent-hover: #6BBBCE;
  --color-accent-soft: rgba(79, 163, 184, 0.2);

  /* Cool tones lifted from the mosaic background photography */
  --color-rust: #3D6B8A;
  --color-olive: #2E7873;
  --color-plum: #4B5FA0;
  --color-slate-teal: #3E7C93;
  --color-gold: #5FA0C4;
  --color-forest: #1F3A3D;

  --color-line: rgba(255, 255, 255, 0.14);

  /* Shadow */
  --shadow-soft: 0 6px 24px rgba(0, 0, 0, 0.28);
  --shadow-lift: 0 18px 42px rgba(0, 0, 0, 0.38);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 50px rgba(0, 0, 0, 0.4);

  /* Typography */
  --font-display: "Josefin Sans", "Century Gothic", Futura, sans-serif;
  --font-sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --font-size-hero: clamp(3rem, 6vw + 1rem, 6.5rem);
  --font-size-h1: clamp(2.25rem, 3vw + 1rem, 3.5rem);
  --font-size-h2: clamp(1.85rem, 2vw + 1rem, 2.5rem);
  --font-size-h3: clamp(1.25rem, 1vw + 1rem, 1.6rem);
  --font-size-body-lg: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-label: 0.75rem;

  --line-height-tight: 1.1;
  --line-height-snug: 1.35;
  --line-height-normal: 1.65;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6.5rem;
  --space-3xl: 9.5rem;

  --section-padding-inline: clamp(1.5rem, 6vw, 7rem);

  /* Radius — clean geometric, gently rounded, never fully organic */
  --radius-sm: 8px;
  --radius-md: 18px;

  /* Motion */
  --motion-duration-fast: 200ms;
  --motion-duration: 420ms;
  --motion-duration-slow: 750ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 0ms;
    --motion-duration: 0ms;
    --motion-duration-slow: 0ms;
  }
}