/* ────────────────────────────────────────────────────────────
   UNBIND landing — design tokens.
   Brand hexes lifted from unbind-app/tailwind.config.js.
   Depth stops define the dive: cream surface → deep reef.
─────────────────────────────────────────────────────────────*/
:root {
  /* brand surfaces */
  --surface:        #fff9eb;
  --surface-2:      #f5eed5;
  --surface-3:      #f0e8cc;
  --paper:          #fffdf5;

  /* brand color */
  --primary:        #a14118;   /* terracotta — CTAs, key words */
  --primary-dim:    #91350c;
  --coral:          #ffad8f;
  --coral-soft:     #ffd2bf;
  --ink:            #37331e;
  --ink-soft:       #655f47;
  --gold:           #735801;
  --gold-deep:      #574300;   /* AA-safe gold on mid-water #9ed2c2 */
  --gold-warm:      #c79a50;
  --outline:        #b9b296;

  /* the dive — depth stops (scene backgrounds) */
  --water-0:        #fdf4dc;   /* waterline glare */
  --water-1:        #d9ecdf;   /* sunlit shallows */
  --water-2:        #9ed2c2;   /* shallow reef */
  --water-3:        #3d9484;   /* mid water */
  --water-4:        #16645a;   /* reef floor */
  --water-5:        #0d4a43;   /* deepest band */

  /* light-on-deep text */
  --foam:           #f4f9ef;   /* body text on deep teal */
  --foam-dim:       #c4ddd2;   /* secondary text on deep teal */
  --pearl:          #fbeed7;   /* pearl highlight */

  /* type scale — fluid, ~1.3 ratio floor */
  --text-hero: clamp(2.6rem, 1.1rem + 6.4vw, 6.2rem);
  --text-h2:   clamp(1.9rem, 1.15rem + 2.9vw, 3.4rem);
  --text-h3:   clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
  --text-lead: clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
  --text-body: clamp(0.98rem, 0.94rem + 0.2vw, 1.1rem);
  --text-tag:  0.78rem;

  /* spacing — 4pt scale, semantic */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-section: clamp(4.5rem, 3rem + 7vw, 9.5rem);

  /* shape + depth */
  --radius-sm:  12px;
  --radius:     22px;
  --radius-lg:  34px;
  --shadow-soft:  0 10px 30px -12px rgba(55, 51, 30, 0.18);
  --shadow-float: 0 24px 60px -20px rgba(13, 74, 67, 0.35);

  /* motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);   /* expo-ish */
  --dur-fast:  180ms;
  --dur:       360ms;

  --maxw: 1140px;
  --lane: 720px;              /* reading lane */
  --font-display: "Epilogue", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
}