/* ============================================================
   Heg.ai — Spacing, radii, shadows, glass & motion tokens
   Strict modular Bento grid. Rectangles only — never circles
   or blobs (icon-buttons & active chips are the only pills).
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;   /* mobile grid gap */
  --space-20: 20px;
  --space-24: 24px;   /* desktop grid gap — the canonical step */
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  --grid-gap: var(--space-24);        /* desktop bento gap */
  --grid-gap-mobile: var(--space-16); /* mobile bento gap */
  --pad-card: var(--space-24);
  --pad-card-lg: var(--space-32);

  /* ---- Radii (rectangles, softly cut) ---- */
  --radius-sm: 8px;     /* inner chips, inputs-in-cards */
  --radius-md: 12px;    /* buttons, tags, small elements */
  --radius-lg: 16px;    /* cards, plates, screens — the default */
  --radius-xl: 20px;    /* large feature panels */
  --radius-pill: 999px; /* icon-buttons & active chips ONLY */

  /* ---- Shadows : deep, diffuse, green-tinted (never grey) ---- */
  --shadow-sm: 0 2px 8px rgba(16, 31, 24, 0.05);
  --shadow-md: 0 8px 24px rgba(16, 31, 24, 0.07);
  --shadow-lg: 0 16px 48px rgba(16, 31, 24, 0.08);   /* the signature float */
  --shadow-xl: 0 28px 72px rgba(16, 31, 24, 0.12);
  --shadow-inverse: 0 24px 64px rgba(0, 0, 0, 0.45); /* plates on ink */

  /* ---- Glassmorphism 2.0 — REAL frosted glass (matches the brand reference) ----
     The look: a genuinely TRANSLUCENT light frost (the photo behind clearly
     blurs THROUGH it) + a STRONG blur + a whisper-faint light hairline that
     just defines the edge + a deep soft shadow for float. The blur is what
     sells it — never a high-opacity fill (that reads as a solid plate).
     ALWAYS place over a photo/texture — glass over a flat fill reads matte.
     Pair every panel with: backdrop-filter: var(--glass-blur). */
  --glass-blur: blur(30px) saturate(125%);    /* @kind other */
  --glass-blur-sm: blur(18px);                /* @kind other */
  /* Three glass VARIANTS (ref): matte frosted · glossy clear · soft heavy blur */
  --glass-blur-frost: blur(28px) saturate(108%) brightness(1.06); /* @kind other */ /* milky matte */
  --glass-blur-clear: blur(6px) saturate(140%);  /* @kind other */ /* sharp see-through */
  --glass-blur-heavy: blur(52px) saturate(120%); /* @kind other */ /* soft fog */
  /* the glossy "clear" variant alone carries a brighter edge highlight */
  --glass-rim-clear: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 0 1px rgba(255,255,255,0.20); /* @kind other */

  /* Edge: a WHISPER-faint light hairline (≤0.14) like the reference — NOT a
     bright/hard rim (that cheapens it). Volume comes from the soft shadow. */
  --glass-rim: inset 0 0 0 1px rgba(255, 255, 255, 0.12); /* @kind other */
  --glass-rim-dark: inset 0 0 0 1px rgba(255, 255, 255, 0.10); /* @kind other */
  --glass-shadow: 0 20px 50px -12px rgba(16, 31, 24, 0.30); /* @kind shadow */ /* natural soft float */

  /* GLASS MATERIALS — ONLY TWO (client rule, June 2026): translucent WHITE
     (light surfaces / photos · Ink text) and translucent GREEN (dark photos /
     accent screens · Ivory text). NO blue / ember / smoke / grey colored glass.
     Fill 16–30% so the scene blurs THROUGH; pair with var(--glass-blur).
     Legacy names are ALIASED to white/green so old refs stay on-brand. */
  --glass-white: rgba(255, 255, 255, 0.20); /* white frost · Ink text */
  --glass-green: rgba(6, 70, 61, 0.30);     /* green frost · Ivory text */
  --glass-base:  var(--glass-white);
  --glass-blue:  var(--glass-white);
  --glass-ember: var(--glass-white);
  --glass-smoke: var(--glass-green);
  /* Slightly denser frost for small panels that carry dark text over a busy
     photo (member cards) — still translucent, just legible. */
  --glass-white-strong: rgba(255, 255, 255, 0.34); /* @kind other */

  /* ---- Grain : true monochrome film grain, 6–10% over imagery. ---- */
  --grain-opacity: 0.08; /* @kind other */

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);   /* @kind other */ /* settle / float-in */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* @kind other */
  --dur-fast: 140ms;  /* @kind other */
  --dur-base: 240ms;  /* @kind other */
  --dur-slow: 420ms;  /* @kind other */

  /* ---- Layout maxima ---- */
  --container: 1200px;       /* @kind spacing */
  --container-wide: 1320px;  /* @kind spacing */
}