/* ============================================
   PURFORM — Design Tokens
   drinkpurform.com
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Brand Colors */
  --green-deep:    #1C6A3A;
  --green-lime:    #6CC04A;
  --green-dark:    #18221B;
  --cream:         #E7E5DF;
  --surface:       #F8FAF4;
  --white:         #FFFFFF;

  /* Phase Colors */
  --phase-pre:     #1C6A3A;
  --phase-during:  #2E7BAA;
  --phase-post:    #C1502E;

  /* Neutral */
  --ink:           #18221B;
  --ink-60:        rgba(24,34,27,0.6);
  --ink-30:        rgba(24,34,27,0.3);
  --ink-12:        rgba(24,34,27,0.12);
  --ink-06:        rgba(24,34,27,0.06);

  /* Typography */
  --font-head:     'Space Grotesk', sans-serif;
  --font-body:     'Manrope', sans-serif;

  /* Spacing scale */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-80:  80px;
  --sp-120: 120px;

  /* Radius */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 999px;

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.10);
  --shadow-lg:  0 20px 48px rgba(0,0,0,0.14);

  /* Layout */
  --max-w: 1240px;
  --nav-h: 72px;

  /* Transitions */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}