/*
 * Make Baby Complete — Premium Liquid Gold Dimensional Design System
 * -----------------------------------------------------------------------------
 * Shared design tokens for the app AND the website. Any project (React,
 * Next.js, static HTML) can import this single CSS file and inherit the
 * complete brand palette + spacing + motion + shadow language.
 *
 * Usage in a website:
 *   <link rel="stylesheet" href="/shared/theme/tokens.css" />
 *   Then reference the variables e.g. background: var(--mbc-gold-500);
 *
 * All tokens live under the `--mbc-` prefix so they never collide with
 * an existing site's variables.
 */

:root {
  /* ── Color palette ─────────────────────────────────────────── */
  --mbc-ivory:            #FBF3DE;
  --mbc-cream:            #F7EAC7;
  --mbc-champagne:        #F1DEA8;
  --mbc-gold-300:         #E8C882;
  --mbc-gold-400:         #D8AC5A;
  --mbc-gold-500:         #C48D32;   /* primary gold */
  --mbc-gold-600:         #9B6A16;
  --mbc-gold-700:         #7A4A12;
  --mbc-plum:             #3A1F3D;   /* deep text */
  --mbc-plum-soft:        #5E2E5A;
  --mbc-bronze:           #7A4A12;
  --mbc-rose-accent:      #C4939A;

  /* Semantic surfaces */
  --mbc-surface-glass:    rgba(255, 253, 240, 0.68);
  --mbc-surface-warm:     rgba(247, 234, 199, 0.94);
  --mbc-surface-deep:     rgba(196, 141, 50, 0.98);
  --mbc-text-primary:     var(--mbc-plum);
  --mbc-text-muted:       rgba(58, 31, 61, 0.72);
  --mbc-border-hi:        rgba(196, 141, 50, 0.55);
  --mbc-border-soft:      rgba(196, 141, 50, 0.28);

  /* ── Effects ───────────────────────────────────────────────── */
  --mbc-shadow-card:      0 18px 40px -20px rgba(74, 45, 26, 0.35),
                          0 6px 14px -6px rgba(74, 45, 26, 0.22);
  --mbc-shadow-hover:     0 26px 60px -22px rgba(74, 45, 26, 0.45),
                          0 10px 18px -8px rgba(74, 45, 26, 0.28);
  --mbc-glow-active:      0 0 0 3px rgba(196, 141, 50, 0.55),
                          0 12px 26px -10px rgba(122, 74, 18, 0.5);
  --mbc-glass-blur:       12px;
  --mbc-sparkle-opacity:  0.85;

  /* ── Spacing ───────────────────────────────────────────────── */
  --mbc-grid-gap:         clamp(1.25rem, 2.5vw, 2rem);
  --mbc-card-padding:     clamp(1.15rem, 2.4vw, 1.75rem);
  --mbc-page-padding:     clamp(1rem, 3vw, 2.5rem);
  --mbc-section-gap:      clamp(2.5rem, 5vw, 4.5rem);

  /* ── Radius ────────────────────────────────────────────────── */
  --mbc-radius-card:      22px;
  --mbc-radius-pill:      999px;
  --mbc-radius-input:     14px;

  /* ── Typography ────────────────────────────────────────────── */
  --mbc-font-serif:       "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --mbc-font-sans:        ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mbc-fs-title:         clamp(1.35rem, 2vw, 1.6rem);
  --mbc-fs-subtitle:      clamp(1rem, 1.4vw, 1.15rem);
  --mbc-fs-label:         0.925rem;
  --mbc-fs-body:          0.925rem;
  --mbc-fs-small:         0.78rem;
  --mbc-fw-body:          500;
  --mbc-fw-strong:        700;
  --mbc-fw-hero:          800;

  /* ── Motion ────────────────────────────────────────────────── */
  --mbc-t-hover:          200ms;
  --mbc-t-tap:            120ms;
  --mbc-t-page:           320ms;
  --mbc-t-spark:          6s;
  --mbc-easing:           cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --mbc-t-hover: 1ms;
    --mbc-t-tap:   1ms;
    --mbc-t-page:  1ms;
    --mbc-t-spark: 0s;
  }
}

/* Accessibility — focus outline shared by every clickable in the system. */
:root { --mbc-focus-ring: 0 0 0 3px rgba(196, 141, 50, 0.55), 0 0 0 6px rgba(58, 31, 61, 0.15); }
.mbc-focusable:focus-visible,
.mbc-dim-card:focus-visible,
.mbc-heart-card:focus-visible,
.mbc-liquid-btn:focus-visible {
  outline: none !important;
  box-shadow: var(--mbc-focus-ring) !important;
}