/* FROGS — styles.css (self-contained for Cloudflare) */
@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;
}

/* spinning nooneismadatyou animation */
@keyframes frogs-spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* ===========================================
   FROGS — Color tokens
   A sky-and-grass Frutiger Aero palette: cool sky blues up top,
   warm grass greens below, hot-pink "pop" accent, gold highlight,
   deep frog green for text, warm cream paper.
   =========================================== */

:root {
  /* ---- Base palette ---- */
  --sky: #5FC9E8;          /* primary sky blue */
  --sky-light: #B9E8F7;    /* pale sky / glass tint */
  --sky-deep: #4FB8E8;     /* saturated top-of-sky */

  --grass: #6FCB4D;        /* primary grass green */
  --grass-dark: #4FA832;   /* grass shadow */
  --grass-light: #B9E8C8;  /* horizon haze */

  --frog: #1F5C3F;         /* frog green — secondary text */
  --frog-deep: #143D29;    /* deepest green — primary text / dark surfaces */

  --pop: #FF5FA2;          /* hot-pink accent — the "Lisa Frank" pop */
  --pop-light: #FFB3D4;    /* soft pink tint */
  --pop-dark: #E03E84;     /* pressed pink */

  --gold: #FFC93C;         /* sunny gold highlight */
  --gold-dark: #E8A800;    /* gold shadow */

  --teal: #4FE0C4;         /* aqua accent (Lilypad pillar) */
  --teal-dark: #1D9E75;

  --cream: #FFFBEF;        /* warm paper background */
  --chrome: #E8F4FF;       /* cool blue-white chrome */
  --chrome-white: #FFFFFF; /* pure white glass */

  /* ---- Semantic aliases ---- */
  --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 colors ---- */
  --pillar-leap: var(--pop);       /* Leap — Growth */
  --pillar-land: var(--grass);     /* Land — Operations */
  --pillar-lilypad: var(--teal);   /* Lilypad — Commerce */
  --pillar-ripple: var(--gold);    /* Ripple — Creative */

  /* ---- Signature gradients ---- */
  --grad-bliss: linear-gradient(180deg, #4FB8E8 0%, #7FD4F0 35%, #B9E8C8 62%, #6FCB4D 100%); /* @kind color */
  --grad-glass: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(232,244,255,0.7) 100%); /* @kind color */
  --grad-chrome-btn: linear-gradient(180deg, #FFFFFF 0%, var(--chrome) 60%, var(--sky-light) 100%); /* @kind color */
  --grad-pop-btn: linear-gradient(180deg, #FF8FBE 0%, var(--pop) 60%, var(--pop-dark) 100%); /* @kind color */
}
/* ===========================================
   FROGS — Typography tokens
   EB Garamond for elegant serif display (Apple-90s Garamond feel),
   Inter for body, Space Mono for "computer" UI labels & eyebrows,
   Baloo 2 reserved as a rounded accent for the logo lockup.
   =========================================== */

:root {
  /* ---- Families ---- */
  --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;

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-black: 800; /* @kind font */

  /* ---- Display scale (Cormorant Garamond — condensed, so set generously) ---- */
  --text-hero: clamp(48px, 8vw, 104px);   /* hero headline */
  --text-display: clamp(32px, 4.4vw, 52px); /* section titles */
  --text-h3: 26px;                        /* card / sub-section heads */
  --text-h4: 21px;                        /* small heads */

  /* ---- Body scale (Inter) ---- */
  --text-lead: 18px;     /* section intro / lead paragraph */
  --text-body: 16px;     /* default body */
  --text-sm: 14px;       /* dense / list copy */

  /* ---- Mono / label scale (Space Mono) ---- */
  --text-label: 13px;    /* nav, eyebrows, UI labels */
  --text-meta: 12px;     /* badges, captions, filenames */
  --text-micro: 11px;    /* tiny tile labels */

  /* ---- Line heights ---- */
  --lh-tight: 1.04;      /* @kind font */ /* hero */
  --lh-display: 1.12;    /* @kind font */ /* section titles */
  --lh-body: 1.6;        /* @kind font */ /* body copy */
  --lh-loose: 1.7;       /* @kind font */ /* long-form card copy */

  /* ---- Tracking ---- */
  --tracking-label: 0.08em;  /* @kind font */ /* uppercase mono labels */
  --tracking-tight: 0.005em; /* @kind font */ /* big serif display */
}
/* ===========================================
   FROGS — Spacing, radius & layout tokens
   =========================================== */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --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;   /* section vertical rhythm */

  /* ---- Radii ---- */
  --radius-sm: 12px;   /* icon tiles, small chips */
  --radius-md: 16px;   /* inputs, value cards */
  --radius-aero: 20px; /* signature panel / card radius */
  --radius-lg: 24px;
  --radius-pill: 999px;/* buttons, badges, eyebrows */

  /* ---- Layout ---- */
  --container-max: 1200px; /* @kind spacing */
  --container-pad: 32px; /* @kind spacing */
  --section-pad-y: 96px; /* @kind spacing */
  --section-pad-y-tight: 64px; /* @kind spacing */
}
/* ===========================================
   FROGS — Effects: shadows, glass gloss, borders
   The "aero" look = soft green-tinted drop shadows + a glossy
   white highlight strip across the top of glass surfaces.
   =========================================== */

:root {
  /* ---- Drop shadows (frog-green tinted, never neutral gray) ---- */
  --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);

  /* ---- Inset highlights (the glossy top edge) ---- */
  --gloss-inset: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --bevel-inset: inset 0 -2px 4px rgba(0, 0, 0, 0.15);

  /* ---- Glass gloss overlay gradient (apply to a ::before strip) ---- */
  --gloss-strip: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 100%); /* @kind color */

  /* ---- Borders ---- */
  --border-width: 1.5px; /* @kind other */
  --border-glass: 1.5px solid rgba(255, 255, 255, 0.9); /* @kind other */
  --border-soft: 1.5px solid rgba(31, 92, 63, 0.12); /* @kind other */

  /* ---- Backdrop blur amounts ---- */
  --blur-glass: 6px; /* @kind other */
  --blur-nav: 10px; /* @kind other */

  /* ---- Motion ---- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* playful overshoot for lifts */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --dur-fast: 0.15s; /* @kind other */
  --dur-med: 0.2s; /* @kind other */
  --lift-hover: -3px;   /* default hover translateY @kind other */
  --lift-hover-lg: -6px;/* icon / card hover lift @kind other */

  /* ---- Textures (layer over flat fills / gradients) ---- */
  /* fine film-grain noise — soft-light blend at low opacity */
  --texture-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* @kind other */
  /* Aqua-style horizontal pinstripe */
  --texture-pinstripe: repeating-linear-gradient(180deg, rgba(255,255,255,0.07) 0px, rgba(255,255,255,0.07) 1px, transparent 1px, transparent 4px); /* @kind other */
  /* faint blueprint grid (use with background-size:26px 26px) */
  --texture-grid: linear-gradient(rgba(79,184,232,0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(79,184,232,0.2) 1px, transparent 1px); /* @kind other */
  /* dotted "desktop" pattern (use with background-size:20px 20px) */
  --texture-dots: radial-gradient(rgba(31,92,63,0.10) 1.4px, transparent 1.5px); /* @kind other */
}