/* Little Glow Getters — Design Tokens
   Palette pulled directly from the logo: sunny yellow, warm ember,
   sky blue, coral heart, cream cloud. Ink chosen for AAA on cream. */

:root {
  /* Color — primary palette */
  --sun:        #FFC93D;
  --sun-deep:   #F4B11E;
  --ember:      #FF9D3D;
  --ember-deep: #F07A1A;
  --sky:        #5DC1E0;
  --sky-deep:   #2A9CC0;
  --coral:      #FF7E8A;
  --mint:       #9DD9A8;
  --lavender:   #C7A8F0;

  /* Color — surfaces & ink */
  --cloud:      #FFF8E7;
  --mist:       #FBFAF5;
  --paper:      #FFFFFF;
  --ink:        #2D3047;
  --ink-soft:   #4A4E6B;
  --ink-mute:   #7A7E96;
  --hairline:   rgba(45, 48, 71, 0.10);

  /* Gradients */
  --grad-warm: radial-gradient(120% 80% at 20% 0%,  #FFE9B0 0%, transparent 60%),
               radial-gradient(110% 90% at 100% 10%, #CDEEF8 0%, transparent 55%),
               radial-gradient(100% 80% at 50% 100%, #FFE3D6 0%, transparent 55%),
               linear-gradient(180deg, var(--mist) 0%, #FFF6E5 100%);
  --grad-sun:  radial-gradient(circle at 35% 30%, #FFE08A, var(--sun) 55%, var(--ember) 100%);
  --grad-sky:  linear-gradient(135deg, var(--sky) 0%, var(--sky-deep) 100%);
  --grad-rainbow: linear-gradient(90deg,
                  var(--coral) 0%, var(--ember) 22%, var(--sun) 44%,
                  var(--mint) 66%, var(--sky) 84%, var(--lavender) 100%);

  /* Shadows — warm, soft, multi-layer for depth without harshness */
  --shadow-xs: 0 1px 2px rgba(45,48,71,0.06),
               0 1px 3px rgba(45,48,71,0.04);
  --shadow-sm: 0 2px 6px rgba(45,48,71,0.06),
               0 6px 14px rgba(255,157,61,0.08);
  --shadow-md: 0 8px 24px rgba(45,48,71,0.10),
               0 16px 36px rgba(255,201,61,0.12);
  --shadow-lg: 0 18px 50px rgba(45,48,71,0.14),
               0 30px 60px rgba(255,157,61,0.16);
  --glow-sun:  0 0 60px rgba(255,201,61,0.45),
               0 0 120px rgba(255,157,61,0.25);

  /* Type scale (clamp for fluid) */
  --fs-xs:    clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --fs-sm:    clamp(0.92rem, 0.88rem + 0.2vw, 1.00rem);
  --fs-base:  clamp(1.02rem, 0.98rem + 0.25vw, 1.14rem);
  --fs-md:    clamp(1.18rem, 1.10rem + 0.5vw, 1.35rem);
  --fs-lg:    clamp(1.50rem, 1.30rem + 1.0vw, 1.95rem);
  --fs-xl:    clamp(2.10rem, 1.70rem + 2.0vw, 3.10rem);
  --fs-2xl:   clamp(2.80rem, 2.10rem + 3.5vw, 4.80rem);
  --fs-3xl:   clamp(3.40rem, 2.40rem + 5.0vw, 6.20rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;

  /* Radii — friendly rounded */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;
  --r-blob: 62% 38% 55% 45% / 50% 60% 40% 50%;

  /* Easing — sensory-friendly: smooth, no overshoot bounce */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-warm: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-glide: cubic-bezier(0.65, 0, 0.35, 1);

  /* Durations */
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 500ms;
  --dur-vlow: 800ms;

  /* Layout */
  --container: 1180px;
  --container-narrow: 880px;

  /* Focus ring */
  --focus: 3px solid var(--sun-deep);
  --focus-offset: 3px;
}

@media (prefers-color-scheme: dark) {
  /* Intentionally NOT inverting — brand needs warm cream surface.
     Slightly deeper ink for OLED comfort. */
  :root {
    --mist: #FFF6E5;
  }
}