/* FROGS — styles.css (self-contained for Cloudflare deploy) */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Baloo+2:wght@600;700;800&display=swap");

@font-face {
  font-family: "ITC Garamond Std";
  src: url("assets/fonts/ITC-Garamond-Std-Book-Condensed.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --sky: #5FC9E8;
  --sky-light: #B9E8F7;
  --sky-deep: #4FB8E8;
  --grass: #6FCB4D;
  --grass-dark: #4FA832;
  --grass-light: #B9E8C8;
  --frog: #1F5C3F;
  --frog-deep: #143D29;
  --pop: #FF5FA2;
  --pop-light: #FFB3D4;
  --pop-dark: #E03E84;
  --gold: #FFC93C;
  --gold-dark: #E8A800;
  --teal: #4FE0C4;
  --teal-dark: #1D9E75;
  --cream: #FFFBEF;
  --chrome: #E8F4FF;
  --chrome-white: #FFFFFF;
  --bg-page: var(--cream);
  --bg-dark: var(--frog-deep);
  --surface-card: var(--chrome-white);
  --surface-chrome: var(--chrome);
  --surface-glass: rgba(255,255,255,0.85);
  --text-primary: var(--frog-deep);
  --text-secondary: var(--frog);
  --text-muted: rgba(31,92,63,0.78);
  --text-on-dark: var(--cream);
  --text-on-pop: #ffffff;
  --accent: var(--pop);
  --accent-soft: var(--pop-light);
  --link: var(--pop);
  --link-hover: var(--pop-dark);
  --border-soft: rgba(31,92,63,0.12);
  --border-glass: rgba(255,255,255,0.9);
  --pillar-leap: var(--pop);
  --pillar-land: var(--grass);
  --pillar-lilypad: var(--teal);
  --pillar-ripple: var(--gold);
  --grad-bliss: linear-gradient(180deg,#4FB8E8 0%,#7FD4F0 35%,#B9E8C8 62%,#6FCB4D 100%);
  --grad-glass: linear-gradient(180deg,rgba(255,255,255,0.85) 0%,rgba(232,244,255,0.7) 100%);
  --grad-chrome-btn: linear-gradient(180deg,#FFFFFF 0%,var(--chrome) 60%,var(--sky-light) 100%);
  --grad-pop-btn: linear-gradient(180deg,#FF8FBE 0%,var(--pop) 60%,var(--pop-dark) 100%);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px; --space-24:96px;
  --radius-sm:12px; --radius-md:16px; --radius-aero:20px;
  --radius-lg:24px; --radius-pill:999px;
  --container-max:1200px; --container-pad:32px; --section-pad-y:96px;
  --aero-shadow:0 8px 24px rgba(31,92,63,0.18),0 2px 6px rgba(31,92,63,0.12);
  --aero-shadow-lg:0 16px 40px rgba(31,92,63,0.22),0 4px 12px rgba(31,92,63,0.14);
  --aero-shadow-sm:0 2px 6px rgba(31,92,63,0.14);
  --gloss-inset:inset 0 1px 0 rgba(255,255,255,0.8);
  --bevel-inset:inset 0 -2px 4px rgba(0,0,0,0.15);
  --blur-glass:6px; --blur-nav:10px;
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --dur-fast:0.15s; --dur-med:0.2s;
  --font-display:"ITC Garamond Std","Times New Roman",serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
  --font-rounded:"Baloo 2",system-ui,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
  --text-hero:clamp(48px,8vw,104px);
  --text-display:clamp(32px,4.4vw,52px);
  --text-h3:26px; --text-h4:21px;
  --text-lead:18px; --text-body:16px; --text-sm:14px;
  --text-label:13px; --text-meta:12px; --text-micro:11px;
  --lh-tight:1.04; --lh-display:1.12; --lh-body:1.6; --lh-loose:1.7;
  --tracking-label:0.08em; --tracking-tight:0.005em;
}