/* ==========================================================================
   FAVOR SUITE - DESIGN TOKENS
   Locked brand colors (do not change without approval). All other
   tokens (spacing, radius, shadow, type scale) support the locked
   palette and are safe to adjust.
   ========================================================================== */

:root {
  /* ---- Locked brand colors (source of truth, see project brief) ---- */
  --favor-pink: #ff6faf;
  --party-aqua: #40c4c7;
  --celebration-navy: #233f73;
  --confetti-gold: #ffc857;
  --soft-lavender: #a99ad6;
  --blush-cloud: #ffe8f0;
  --white: #ffffff;

  /* ---- Derived tints/shades (generated from locked colors, for
     hover states, borders, subtle backgrounds; not new brand colors) ---- */
  --favor-pink-dark: #e6559a;
  --party-aqua-dark: #2fa5a8;
  --navy-tint-05: #eef1f7;
  --navy-tint-10: #dde3ee;
  --border-soft: #e9e2ee;
  --ink: var(--celebration-navy);
  --ink-muted: #52618c;

  /* ---- Typography ---- */
  --font-display: "Fredoka", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.625rem;
  --fs-xl: 2.125rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.5rem;

  /* ---- Spacing scale ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* ---- Shape / elevation ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(35, 63, 115, 0.08);
  --shadow-md: 0 10px 30px rgba(35, 63, 115, 0.12);
  --shadow-lg: 0 20px 50px rgba(35, 63, 115, 0.16);

  --container-max: 1200px;
  --border-width: 2px;
}

@media (max-width: 640px) {
  :root {
    --fs-3xl: 2.5rem;
    --fs-2xl: 2.1rem;
    --fs-xl: 1.65rem;
    --fs-lg: 1.35rem;

         --space-2xl: 3.5rem;
         --space-xl: 2.75rem;
         --space-lg: 2rem;
  }
}