/* ============================================================
   PLANET OF PLAY — DESIGN TOKENS
   ============================================================
   All colors, fonts, spacing, and other design primitives live
   here. Change a token here → it updates across the whole site.
   ============================================================ */

:root {
  /* === BRAND COLORS === */
  --pop-navy:       #1A3D9F;
  --pop-navy-deep:  #0E2A6E;
  --pop-navy-tint:  rgba(26, 61, 159, 0.2);  /* Light navy — form input borders, soft outlines */
  --pop-mint:       #5DD9A0;
  --pop-mint-soft:  #E8FAF1;
  --pop-mint-glow:  rgba(93, 217, 160, 0.25); /* Focus-ring glow for form fields */
  --pop-yellow:     #F5C12C;
  --pop-yellow-soft:#FEF6E0;
  --pop-teal:       #5BCFB8;

  /* === NEUTRALS === */
  --pop-cream:      #FFFCF5;
  --pop-white:      #FFFFFF;
  --pop-text:       #1A2332;
  --pop-text-soft:  #4B5563;
  --pop-border:     #E5E7EB;

  /* === SEMANTIC === */
  --pop-success:    #16A34A;
  --pop-error:      #DC2626;

  /* === TYPOGRAPHY === */
  --pop-font-display: 'Fredoka', system-ui, -apple-system, sans-serif;
  --pop-font-body:    'Nunito',  system-ui, -apple-system, sans-serif;

  --pop-text-hero:   clamp(2.5rem, 6vw, 4.5rem);
  --pop-text-h2:     clamp(2rem, 4vw, 3rem);
  --pop-text-h3:     1.5rem;
  --pop-text-lg:     1.125rem;
  --pop-text-body:   1rem;
  --pop-text-sm:     0.875rem;
  --pop-text-xs:     0.75rem;

  --pop-line-tight:  1.15;
  --pop-line-snug:   1.35;
  --pop-line-normal: 1.6;

  /* === SPACING (4px scale) === */
  --pop-space-1:  0.25rem;   /*  4px */
  --pop-space-2:  0.5rem;    /*  8px */
  --pop-space-3:  0.75rem;   /* 12px */
  --pop-space-4:  1rem;      /* 16px */
  --pop-space-5:  1.5rem;    /* 24px */
  --pop-space-6:  2rem;      /* 32px */
  --pop-space-7:  3rem;      /* 48px */
  --pop-space-8:  4rem;      /* 64px */
  --pop-space-9:  6rem;      /* 96px */
  --pop-space-10: 8rem;      /* 128px */

  /* === LAYOUT === */
  --pop-container:       1200px;
  --pop-container-wide:  1440px;
  --pop-container-narrow: 800px;
  --pop-gutter:          1.5rem;

  /* === RADIUS === */
  --pop-radius-sm:  6px;
  --pop-radius-md:  12px;
  --pop-radius-lg:  20px;
  --pop-radius-pill: 9999px;

  /* === SHADOWS === */
  --pop-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.05);
  --pop-shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --pop-shadow-lg:  0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  --pop-shadow-xl:  0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);

  /* === TRANSITIONS === */
  --pop-transition-fast: 150ms ease;
  --pop-transition:      250ms ease;
  --pop-transition-slow: 400ms ease;

  /* === Z-INDEX === */
  --pop-z-header:    50;
  --pop-z-overlay:   100;
  --pop-z-modal:     200;
}