/* ═══════════════════════════════════════
   ELLIE CARE — Design Tokens
   ═══════════════════════════════════════ */
:root {
  /* Brand Colors */
  --blue-deep: #2F3A4D;
  --blue-dark: #1E2838;
  --mint: #B8E65C;
  --mint-btn: #B8E65C;
  --pink: #9933FF;
  --soft-green: #F0FFD1;
  --soft-purple: #D9B3FF;
  --white: #ffffff;
  --gray-bg: #F2F2F2;

  /* Text */
  --text-dark: #1a1a2e;
  --text-muted: #5a5a7a;

  /* Surfaces */
  --card-bg: rgba(255,255,255,0.92);
  --glass-bg: rgba(255,255,255,0.95);
  --glass-border: rgba(255,255,255,0.2);

  /* Radius */
  --radius: 20px;
  --radius-sm: 12px;
  --radius-pill: 50px;
  --radius-full: 999px;

  /* Spacing */
  --section-pad-x: clamp(1.5rem, 6vw, 5rem);
  --section-pad-y: 6rem;
  --max-width: 1200px;
  --max-width-sm: 1100px;
  --max-width-xs: 920px;

  /* Motion */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Shadows */
  --shadow-soft: 0 2px 8px rgba(0,0,0,0.03);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-hover: 0 20px 40px rgba(0,0,0,0.15), 0 8px 16px rgba(0,0,0,0.08);
  --shadow-fab: 0 18px 50px rgba(0,0,0,0.18);
  --shadow-premium:
    0 4px 6px rgba(0,0,0,0.04),
    0 12px 24px rgba(0,0,0,0.08),
    0 24px 48px rgba(0,0,0,0.08);
  --shadow-premium-hover:
    0 8px 16px rgba(0,0,0,0.06),
    0 20px 40px rgba(0,0,0,0.12),
    0 32px 64px rgba(0,0,0,0.12);
  --shadow-glow-mint: 0 8px 32px rgba(184,230,92,0.35);
  --shadow-glow-pink: 0 8px 32px rgba(153,51,255,0.3);

  /* Glass */
  --glass-blur: blur(12px);
  --glass-blur-sm: blur(8px);

  /* Gradients */
  --gradient-mint-pink: linear-gradient(135deg, rgba(184,230,92,0.2) 0%, rgba(153,51,255,0.15) 100%);
  --gradient-pink-mint: linear-gradient(135deg, rgba(153,51,255,0.15) 0%, rgba(184,230,92,0.1) 100%);
  --gradient-blue: linear-gradient(180deg, var(--blue-deep) 0%, var(--blue-dark) 100%);
  --gradient-footer: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-dark) 100%);
  --gradient-separator: linear-gradient(90deg, transparent 0%, rgba(184,230,92,0.3) 50%, transparent 100%);
  --gradient-text: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.85) 100%);
  --gradient-text-dark: linear-gradient(135deg, var(--blue-deep) 0%, #3a4a5d 100%);
  --gradient-section-sep: linear-gradient(90deg, transparent, rgba(184,230,92,0.3), rgba(153,51,255,0.3), transparent);
  --gradient-hero-pink: linear-gradient(135deg, #f0e6ff 0%, #e8e0ff 30%, #fff 70%);

  /* Decorative borders */
  --border-subtle: 1px solid rgba(0,0,0,0.06);
  --border-mint: 1px solid rgba(184,230,92,0.3);
  --border-pink: 1px solid rgba(153,51,255,0.3);
  --border-glow-pink: 1px solid rgba(153,51,255,0.5);

  /* Typography scale (clamp) */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.78rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.88rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --text-md: clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --text-xl: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  --text-2xl: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem);
  --text-3xl: clamp(1.8rem, 1.5rem + 2vw, 2.8rem);
  --text-4xl: clamp(2.2rem, 1.8rem + 2.5vw, 3.5rem);
  --text-5xl: clamp(2.8rem, 2.2rem + 3vw, 4.5rem);
  --text-display: clamp(3.2rem, 2.5rem + 4vw, 5.5rem);
}

/* Mobile overrides */
@media (max-width: 900px) {
  :root {
    --section-pad-x: 16px;
    --section-pad-y: 4rem;
  }
}