/* ============================================================
   SaltyPay — Design Tokens
   Lane: "premium coastal craft" — teal-drenched (Committed),
   coral as punctuation, warm shell for breathing room.
   ============================================================ */

:root {
  /* --- Brand: ocean teal ramp (carries the page) --- */
  --tide-950: #11434B;   /* deepest — footer ground (kept dark for readable meta) */
  --tide-900: #185860;   /* dark bands / page-hero — true brand teal, not pine */
  --tide-800: #1E656E;   /* = brand teal */
  --tide-700: #2A808B;
  --teal-600: #1E656E;   /* brand teal */
  --teal-500: #2A808B;
  --teal-400: #4E9BA4;
  --teal-300: #84B8BE;
  --teal-100: #DDEAEB;
  --teal-050: #ECF3F3;

  /* --- Accent: coral (the warm punctuation) --- */
  --coral-700: #A33C30;  /* darkened for AA tag/icon text on coral-100 (5.3:1) */
  --coral-600: #E07A71;
  --coral-500: #EF9891;  /* brand coral */
  --coral-300: #F6C4BF;
  --coral-100: #FBE4E1;

  /* --- Sand / sun (tertiary, used sparingly) --- */
  --sand-600: #7E5410;  /* darkened for AA tag/icon text on sand-100 (5.8:1) */
  --sand-500: #E7AC4A;
  --sand-100: #FBEFD6;

  /* --- Neutrals: warm shell + teal-tinted ink (never gray-on-tint) --- */
  --shell:      #FBF7F1;  /* warm paper — light section ground */
  --shell-deep: #F3EBDF;
  --paper:      #FFFFFF;
  --ink:        #14333A;  /* near-black, teal-tinted — body on light */
  --ink-soft:   #455A60;  /* secondary text on light (>=4.5:1 on shell) */
  --ink-faint:  #5A6E73;  /* tertiary / meta — darkened to pass AA (5.0:1 on shell) */

  /* --- On dark (teal) surfaces --- */
  --on-dark:        #F4F8F7;
  --on-dark-soft:   rgba(244, 248, 247, 0.80);
  --on-dark-faint:  rgba(244, 248, 247, 0.60);
  --hairline-dark:  rgba(244, 248, 247, 0.16);
  --hairline-light: rgba(20, 51, 58, 0.10);

  /* --- Type --- */
  --font-display: 'XXIIAven', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs:   0.8125rem;   /* 13px */
  --text-sm:   0.9375rem;   /* 15px */
  --text-base: 1.0625rem;   /* 17px body */
  --text-lg:   1.1875rem;   /* 19px lead */
  --text-xl:   clamp(1.3rem, 1.1rem + 1vw, 1.6rem);
  --display-sm: clamp(1.75rem, 1.4rem + 1.8vw, 2.4rem);
  --display-md: clamp(2.2rem, 1.7rem + 2.6vw, 3.2rem);
  --display-lg: clamp(2.6rem, 1.9rem + 3.6vw, 4.4rem);
  --display-xl: clamp(3rem, 2.1rem + 4.6vw, 5.5rem);

  /* --- Spacing (4pt base) --- */
  --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: 6rem;
  --space-3xl: 8rem;
  --section: clamp(4.5rem, 3rem + 7vw, 8rem);
  --container: min(1180px, 92vw);
  --measure: 62ch;

  /* --- Radius --- */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 100px;

  /* --- Shadow (teal-tinted, subtle) --- */
  --shadow-sm: 0 1px 2px rgba(12, 49, 55, 0.06), 0 2px 8px rgba(12, 49, 55, 0.05);
  --shadow-md: 0 6px 16px rgba(12, 49, 55, 0.08), 0 2px 6px rgba(12, 49, 55, 0.05);
  --shadow-lg: 0 18px 48px rgba(12, 49, 55, 0.13), 0 6px 16px rgba(12, 49, 55, 0.07);
  --shadow-coral: 0 12px 32px rgba(224, 122, 113, 0.30);
  --shadow-teal: 0 12px 32px rgba(20, 51, 58, 0.28);

  /* --- Motion --- */
  --ease-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.30, 1);
  --ease-soft: cubic-bezier(0.33, 0.06, 0.18, 1);

  /* --- Z-index scale --- */
  --z-base: 1;
  --z-raised: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-menu: 300;
}