/* ============================================================
   variables.css — Design Tokens (Paleta, Tipografia, Espaçamentos)
   ============================================================ */

:root {
  /* ── Paleta Azul Bebê (Blue) ─────────────────────────────────── */
  --blue-50:    #f0f9ff;
  --blue-100:   #e0f2fe;
  --blue-200:   #bae6fd;
  --blue-300:   #7dd3fc;
  --blue-400:   #38bdf8;
  --blue-500:   #0ea5e9;
  --blue-600:   #0284c7;

  /* ── Paleta Lilás ────────────────────────────────────────── */
  --lilac-50:   #f5f3ff;
  --lilac-100:  #ede9fe;
  --lilac-200:  #ddd6fe;
  --lilac-300:  #c4b5fd;
  --lilac-400:  #a78bfa;
  --lilac-500:  #8b5cf6;

  /* ── Paleta Pêssego ──────────────────────────────────────── */
  --peach-100:  #fde8d8;
  --peach-200:  #fad2b6;
  --peach-300:  #f8b994;

  /* ── Paleta Menta ────────────────────────────────────────── */
  --mint-50:    #f0fdf4;
  --mint-100:   #dcfce7;
  --mint-200:   #bbf7d0;
  --mint-300:   #86efac;
  --mint-400:   #4ade80;

  /* ── Paleta Sky ──────────────────────────────────────────── */
  --sky-50:     #f0f9ff;
  --sky-100:    #e0f2fe;
  --sky-200:    #bae6fd;

  /* ── Neutros ─────────────────────────────────────────────── */
  --neutral-50:  #fafafa;
  --neutral-100: #f4f4f5;
  --neutral-200: #e4e4e7;
  --neutral-300: #d4d4d8;
  --neutral-400: #a1a1aa;
  --neutral-500: #71717a;
  --neutral-600: #52525b;
  --neutral-700: #3f3f46;
  --neutral-800: #27272a;
  --neutral-900: #18181b;

  /* ── Gradientes ──────────────────────────────────────────── */
  --grad-hero:         linear-gradient(135deg, #f0f9ff 0%, #f5f0ff 50%, #e8f7f0 100%);
  --grad-card:         linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%);
  --grad-btn-primary:  linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  --grad-btn-danger:   linear-gradient(135deg, #f87171 0%, #fb923c 100%);
  --grad-btn-info:     linear-gradient(135deg, #60a5fa 0%, #818cf8 100%);
  --grad-btn-success:  linear-gradient(135deg, #4ade80 0%, #34d399 100%);

  /* ── Tipografia ──────────────────────────────────────────── */
  --font-sans: 'Nunito', 'Quicksand', sans-serif;

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Sombras ─────────────────────────────────────────────── */
  --shadow-xs: 0 1px 3px rgba(56, 189, 248, 0.08);
  --shadow-sm: 0 2px 8px rgba(56, 189, 248, 0.12);
  --shadow-md: 0 4px 20px rgba(56, 189, 248, 0.16);
  --shadow-lg: 0 8px 40px rgba(56, 189, 248, 0.20);
  --shadow-xl: 0 20px 60px rgba(14, 165, 233, 0.25);

  /* ── Transições ──────────────────────────────────────────── */
  --transition:        0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:   0.15s ease;
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}