/* ============================================================================
   MiBajaParental — Chocolate + Coral Design Tokens
   Source: redesign handoff (MiBajaParentalRedesign.zip, May 2026).
   Inert by default — opt-in per page/component by referencing `--mbp-*` vars.
   Coexists with pastel-magazine (--brand-*) and theme (--theme-*) systems.
   ============================================================================ */

:root {
  /* ---- COLOR · Primary ---- */
  --mbp-choc:        #2a1d10;
  --mbp-coral:       #d68e7a;
  --mbp-cream:       #faf6f0;
  --mbp-cream-deep:  #f3ecdf;
  --mbp-paper:       #fffdf9;

  /* ---- COLOR · Category Pastels (planificador) ---- */
  --mbp-pink:        #f4d3d3;
  --mbp-sky:         #cfdfee;
  --mbp-mint:        #dceadc;
  --mbp-lavender:    #ddd6ee;
  --mbp-amber-soft:  #fbe9c9;

  /* ---- COLOR · Semantic ---- */
  --mbp-sage:        #5b8a6a;
  --mbp-amber:       #e4a04a;
  --mbp-rose:        #c9696a;

  /* ---- COLOR · Text (derived from chocolate via color-mix) ----
     First declaration in each pair is a static hex fallback (chocolate
     composited over the cream page bg) for browsers without color-mix()
     support — Chrome <111 / WebView <111 / Safari <16.2. Modern browsers
     parse both lines, last-one-wins, and use the color-mix value. */
  --mbp-text-700:    #4f4438;
  --mbp-text-700:    color-mix(in srgb, var(--mbp-choc) 82%, transparent);
  --mbp-text-600:    #685e53;
  --mbp-text-600:    color-mix(in srgb, var(--mbp-choc) 70%, transparent);
  --mbp-text-500:    #877e74;
  --mbp-text-500:    color-mix(in srgb, var(--mbp-choc) 55%, transparent);
  --mbp-text-400:    #a69f96;
  --mbp-text-400:    color-mix(in srgb, var(--mbp-choc) 40%, transparent);
  --mbp-text-300:    #c6bfb8;
  --mbp-text-300:    color-mix(in srgb, var(--mbp-choc) 25%, transparent);
  --mbp-text-200:    #e1dbd5;
  --mbp-text-200:    color-mix(in srgb, var(--mbp-choc) 12%, transparent);
  --mbp-text-100:    #ede8e2;
  --mbp-text-100:    color-mix(in srgb, var(--mbp-choc) 6%, transparent);

  /* ---- TYPOGRAPHY ---- */
  --mbp-font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mbp-font-serif:  'Fraunces', 'Iowan Old Style', Georgia, serif;
  --mbp-font-mono:   'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* Type scale */
  --mbp-text-display: 38px;
  --mbp-text-h1:      32px;
  --mbp-text-h2:      28px;
  --mbp-text-h3:      21px;
  --mbp-text-h4:      17px;
  --mbp-text-body:    15.5px;
  --mbp-text-small:   13px;
  --mbp-text-meta:    12px;
  --mbp-text-eyebrow: 11px;

  /* Line heights */
  --mbp-lh-tight:    1.04;
  --mbp-lh-snug:     1.2;
  --mbp-lh-normal:   1.5;
  --mbp-lh-relaxed:  1.6;

  /* Letter spacing */
  --mbp-ls-display:  -0.028em;
  --mbp-ls-tight:    -0.018em;
  --mbp-ls-tighter:  -0.012em;
  --mbp-ls-wide:     0.04em;
  --mbp-ls-wider:    0.1em;
  --mbp-ls-widest:   0.14em;

  /* ---- SPACING ---- */
  --mbp-space-1:    4px;
  --mbp-space-2:    8px;
  --mbp-space-3:    12px;
  --mbp-space-4:    16px;
  --mbp-space-5:    20px;
  --mbp-space-6:    24px;
  --mbp-space-7:    28px;
  --mbp-space-8:    32px;
  --mbp-space-10:   40px;

  /* ---- RADIUS ---- */
  --mbp-radius-sm:    8px;
  --mbp-radius:       12px;
  --mbp-radius-lg:    16px;
  --mbp-radius-xl:    18px;
  --mbp-radius-pill:  999px;

  /* ---- SHADOW ---- */
  --mbp-shadow-card:    0 2px 12px rgba(42,29,16,0.05);
  --mbp-shadow-hover:   0 4px 18px rgba(42,29,16,0.08);
  --mbp-shadow-cta:     0 14px 30px -10px rgba(42,29,16,0.45);
  --mbp-shadow-soft:    0 2px 14px rgba(42,29,16,0.04);

  /* ---- MOTION ---- */
  --mbp-ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --mbp-dur-fast:   120ms;
  --mbp-dur:        200ms;
}