@charset "UTF-8";
/**
 * Design Tokens — 009-coloring
 * Primary: #ec4899  (HSL 330°, hot pink / rose — rainbow pastel magic)
 * Accent:  #8b5cf6  (HSL 262°, soft purple — creative)
 * Hero:    dreamy rainbow gradient on pure white
 * Typography: Quicksand / Nunito — rounded, joyful
 */

:root {
  /* ── Primary (Rose Pink) ── */
  --site-primary:        #ec4899;
  --site-primary-hover:  #db2777;
  --site-primary-dark:   #9d174d;
  --site-primary-light:  #fdf2f8;
  --site-primary-border: #fbcfe8;

  /* ── Accent (Soft Purple) ── */
  --site-accent:         #8b5cf6;
  --site-accent-hover:   #7c3aed;
  --site-accent-dark:    #5b21b6;

  /* ── Text ── */
  --site-text:           #1a0a2e;
  --site-text-muted:     #6b7280;
  --site-text-light:     #4b5563;

  /* ── Backgrounds ── */
  --site-background:     #ffffff;
  --site-surface:        #fdf4ff;

  /* ── Borders ── */
  --site-border:         #f3e8ff;
  --site-border-dark:    #e9d5ff;

  /* ── Border Radius — Round personality (kids/creative) ── */
  --detail-border-radius: 16px;
  --radius-sm:            8px;
  --radius-button:        9999px;
  --radius-card:          20px;
  --radius-chip:          9999px;

  /* ── Typography ── */
  --font-heading: 'Quicksand', 'Nunito', system-ui, sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Shadows (tinted with brand hue) ── */
  --shadow-sm:   0 1px 3px rgba(236,72,153,0.08);
  --shadow-md:   0 4px 16px rgba(236,72,153,0.12);
  --shadow-lg:   0 10px 30px rgba(236,72,153,0.16);
  --shadow-xl:   0 20px 40px rgba(139,92,246,0.14);
  --shadow-glow: 0 0 28px rgba(236,72,153,0.18);

  /* ── Motion ── */
  --dur-fast:    150ms;
  --dur-normal:  250ms;
  --dur-slow:    400ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── Premium gradient tokens ── */
  --gradient-brand:    linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  --gradient-surface:  linear-gradient(160deg, #fdf4ff 0%, #ffffff 40%, #fff0f6 100%);
  --gradient-hero:     linear-gradient(160deg, #fff0f6 0%, #fdf4ff 40%, #f5f0ff 100%);
  --gradient-rainbow:  linear-gradient(90deg, #f472b6 0%, #c084fc 25%, #818cf8 50%, #34d399 75%, #fbbf24 100%);
  --gradient-card-pink:   linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
  --gradient-card-purple: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  --gradient-card-blue:   linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  --gradient-card-mint:   linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  --gradient-card-yellow: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  --gradient-card-peach:  linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);

  /* ── Category rainbow chip colors ── */
  --chip-animals:    #fce7f3;
  --chip-animals-t:  #be185d;
  --chip-nature:     #dcfce7;
  --chip-nature-t:   #15803d;
  --chip-fantasy:    #ede9fe;
  --chip-fantasy-t:  #6d28d9;
  --chip-holidays:   #fef9c3;
  --chip-holidays-t: #a16207;
  --chip-vehicles:   #dbeafe;
  --chip-vehicles-t: #1d4ed8;
  --chip-people:     #ffedd5;
  --chip-people-t:   #c2410c;
  --chip-default:    #fdf2f8;
  --chip-default-t:  #9d174d;

  /* ── Transition shorthand ── */
  --premium-transition: var(--dur-normal) var(--ease-default);
}