/*
  Design tokens
  Single source of truth for color, type, spacing and motion.
  Values are derived from the original orellinbrom.com Webflow build
  (Poppins type family, black/white palette, fluid viewport-based scale)
  re-expressed with clamp() so type and spacing stay legible at any
  viewport size instead of only at the breakpoints Webflow shipped.
*/

:root {
  /* Color */
  --color-ink: #000;
  --color-paper: #fff;
  --color-paper-translucent: rgb(255 255 255 / 88%);
  --color-ink-translucent: rgb(0 0 0 / 80%);
  --color-line: rgb(0 0 0 / 12%);
  --color-line-dark: rgb(255 255 255 / 16%);

  /* uigradients.com-style neon flow: ten saturated pink/violet/indigo/
     orange-red tones ordered around the hue wheel. True neon
     green/yellow/cyan (#39FF14, #CCFF00-type hues) were tried and cut —
     they sit too close to white's own luminance to clear 3:1 contrast
     against a light page, no matter how the stop is placed. Every color
     below was checked against both pure white and pure black (WCAG
     contrast-ratio formula) and clears 3:1 on both, so it stays legible on
     a light page and on contact.html's dark one alike. Same source list
     js/main.js's initLinkHoverColors() draws random pairs from — see that
     function for the pairing logic and per-color contrast numbers. */
  --gradient-accent: linear-gradient(
    to right,
    #fd1d1d,
    #ff5f1f 11%,
    #3494e6 22%,
    #6c00ff 33%,
    #9d00ff 44%,
    #e100ff 55%,
    #f014e0 66%,
    #ff1493 77%,
    #ff073a 88%,
    #fc354c 100%
  );

  /* Type */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* The old floor (2.25rem=36px) treated this like a short 3-6 word
     display headline at every width — but the actual content is a
     37-word sentence, so at mobile it was wrapping to 9 lines (~475px
     tall, pushing all real page content below the fold) and 6 lines at
     tablet. Recalculated the curve to still reach the same 76px ceiling
     at wide desktop (where the text wraps to just 3-4 lines and can
     carry the bold display treatment), but land on a much more restrained
     ~28px at mobile — a proper "lead paragraph" size, not a headline
     size, since this is meant to be read start to finish, not glanced at. */
  --fs-hero: clamp(1.75rem, 0.7rem + 4.5vw, 4.75rem);
  --fs-h1: clamp(1.75rem, 1.35rem + 1.4vw, 2.75rem);
  --fs-h2: clamp(1.05rem, 0.85rem + 0.7vw, 1.4rem);
  --fs-h3: clamp(0.95rem, 0.8rem + 0.5vw, 1.2rem);
  --fs-h4: clamp(0.95rem, 0.85rem + 0.35vw, 1.1rem);
  --fs-body: clamp(0.9rem, 0.8rem + 0.3vw, 1.05rem);
  --fs-small: clamp(0.78rem, 0.72rem + 0.2vw, 0.9rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.5;

  --ls-tight: -0.02em;

  /* Spacing */
  --space-2xs: 0.4rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --space-lg: clamp(2rem, 1rem + 4vw, 4rem);
  --space-xl: clamp(3rem, 1.5rem + 6vw, 6rem);
  --space-2xl: clamp(4rem, 2rem + 8vw, 8rem);

  --gutter: clamp(1.25rem, 0.6rem + 3vw, 2.5rem);
  --nav-height: 76px;
  --content-max: 1600px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;

  /* Elevation / effects */
  --blur-nav: 12px;
  --radius-sm: 4px;
}

/* Mobile only (not tablet) — the 76px bar reads oversized once the
   floating pill treatment (css/layout.css) shrinks it away from the
   viewport edges; every other rule already reads this token rather than
   a hardcoded height, so overriding it here is enough to resize the bar,
   the mobile menu's top offset, and the contact page's footer height
   together, correctly, with nothing to keep in sync by hand. */
@media (max-width: 640px) {
  :root {
    --nav-height: 64px;
  }
}