/* ================================================
   VIRAVÍCIO DESIGN SYSTEM v2 — Rosa · Branco · Chocolate
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  /* ── ROSA (Primary) ── */
  --pink-50:   #FFF0F6;
  --pink-100:  #FFD6EA;
  --pink-200:  #FFB3D4;
  --pink-300:  #FF80B5;
  --pink-400:  #FF4D96;
  --pink-500:  #FF2178;   /* PRIMARY ★ */
  --pink-600:  #E0005A;
  --pink-700:  #B30048;
  --pink-800:  #800033;

  /* ── CHOCOLATE (Dark) ── */
  --choc-50:   #FDF5F0;
  --choc-100:  #F5DFD0;
  --choc-200:  #E0B898;
  --choc-300:  #C48A60;
  --choc-400:  #9A5A30;
  --choc-500:  #6B3318;
  --choc-600:  #4A1F0C;
  --choc-700:  #321308;
  --choc-800:  #200A04;   /* PRIMARY DARK ★ */
  --choc-900:  #100402;

  /* ── BRANCO QUENTE ── */
  --white-pure: #FFFFFF;
  --white-warm: #FFFBF8;  /* Fundo principal ★ */
  --white-cream:#FFF5EE;
  --white-pink: #FFF0F6;

  /* ── SEMANTIC ── */
  --bg-page:    var(--white-warm);
  --bg-surface: var(--white-pure);
  --bg-pink:    var(--pink-500);
  --bg-dark:    var(--choc-800);

  --fg-primary:   var(--choc-800);
  --fg-secondary: var(--choc-600);
  --fg-muted:     var(--choc-400);
  --fg-on-pink:   #fff;
  --fg-on-dark:   #fff;

  --accent:       var(--pink-500);
  --accent-hover: var(--pink-600);

  --border:       var(--choc-100);
  --border-pink:  var(--pink-200);

  /* ── TYPOGRAPHY ── */
  --font-display: 'Abril Fatface', Georgia, serif;
  --font-body:    'DM Sans', Helvetica, sans-serif;

  /* ── RADIUS — tudo arredondado ── */
  --r-sm:   12px;
  --r-md:   20px;
  --r-lg:   28px;
  --r-xl:   40px;
  --r-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-sm:   0 2px 8px  rgba(32,10,4,.07);
  --shadow-md:   0 4px 24px rgba(32,10,4,.10);
  --shadow-lg:   0 8px 40px rgba(32,10,4,.13);
  --shadow-pink: 0 8px 32px rgba(255,33,120,.28);
}