/* ════════════════════════════════════════════════════════════════════
 * WishNest brand v2 — CSS custom properties
 * ════════════════════════════════════════════════════════════════════
 *
 * Loads AFTER wishnest-theme.css. Redeclares --wn-* values so the
 * existing alias layer (--primary, --gold, etc.) consumed by ~40
 * component files automatically picks up the new brand palette
 * without component-level edits.
 *
 * Palette source: /docs/DESIGNER_BRIEF.md § 5 (LOCKED)
 */

:root {
  /* ─── Brand colours (v2) ─────────────────────────────────────── */
  --wn-primary:           #4B1E3F;
  --wn-primary-dark:      #2A1A22;
  --wn-primary-light:     #6D3A5C;

  --wn-gold:              #D4AF37;
  --wn-gold-soft:         #E6C76B;
  --wn-gold-deep:         #A8861E;

  --wn-rose:              #C24E3E;
  --wn-rose-light:        #D8786A;
  --wn-rose-soft:         #F4E2DD;

  --wn-cream:             #EAD7C6;
  --wn-cream-2:           #F2E4D7;

  --wn-canvas:            #FFF8F3;
  --wn-neutral:           #FAF1E6;

  --wn-brown:             #8B5E3C;

  --wn-text:              #2A1A22;
  --wn-muted:             #6B5A60;

  --wn-success:           #3A7D44;
  --wn-warning:           #C29A2E;
  --wn-danger:            #B23A48;

  /* ─── Typography ─────────────────────────────────────────────── */
  --wn-font-serif:        'Cormorant Garamond', 'Cormorant', 'Garamond',
                          'Times New Roman', serif;
  --wn-font-sans:         'Montserrat', system-ui, -apple-system,
                          'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --wn-font-tagline:      'Montserrat', system-ui, sans-serif;
  --wn-tagline-weight:    300;
  --wn-tagline-style:     italic;
  --wn-tagline-tracking:  0.12em;

  --wn-text-xs:           0.75rem;
  --wn-text-sm:           0.875rem;
  --wn-text-base:         1rem;
  --wn-text-lg:           1.125rem;
  --wn-text-xl:           1.4rem;
  --wn-text-2xl:          1.75rem;
  --wn-text-3xl:          2.2rem;
  --wn-text-4xl:          2.75rem;
  --wn-text-display:      3.5rem;

  --wn-leading-tight:     1.15;
  --wn-leading-snug:      1.35;
  --wn-leading-normal:    1.55;
  --wn-leading-relaxed:   1.75;

  /* ─── Spacing scale ──────────────────────────────────────────── */
  --wn-space-1:           0.25rem;
  --wn-space-2:           0.5rem;
  --wn-space-3:           0.75rem;
  --wn-space-4:           1rem;
  --wn-space-5:           1.5rem;
  --wn-space-6:           2rem;
  --wn-space-8:           3rem;
  --wn-space-10:          4rem;
  --wn-space-12:          6rem;

  /* ─── Radius ─────────────────────────────────────────────────── */
  --wn-radius-sm:         4px;
  --wn-radius:            8px;
  --wn-radius-lg:         12px;
  --wn-radius-xl:         20px;
  --wn-radius-pill:       999px;

  /* ─── Elevation — plum-tinted ────────────────────────────────── */
  --wn-shadow-sm:         0 2px 6px   rgba(75, 30, 63, 0.06);
  --wn-shadow:            0 6px 18px  rgba(75, 30, 63, 0.10);
  --wn-shadow-lg:         0 14px 36px rgba(75, 30, 63, 0.14);
  --wn-shadow-xl:         0 22px 60px rgba(75, 30, 63, 0.18);
  --wn-shadow-gold:       0 8px 22px  rgba(212, 175, 55, 0.28);

  /* ─── Motion ─────────────────────────────────────────────────── */
  --wn-ease:              cubic-bezier(0.22, 0.61, 0.36, 1);
  --wn-ease-soft:         cubic-bezier(0.4,  0,    0.2,  1);
  --wn-duration-fast:     150ms;
  --wn-duration:          240ms;
  --wn-duration-slow:     400ms;

  /* ─── Z-index scale ──────────────────────────────────────────── */
  --wn-z-sticky:          100;
  --wn-z-overlay:         900;
  --wn-z-modal:           1000;
  --wn-z-toast:           1100;

  /* ─── Alias layer — DO NOT REMOVE ────────────────────────────── */
  --primary:              var(--wn-primary);
  --primary-dark:         var(--wn-primary-dark);
  --gold:                 var(--wn-gold);
  --gold-soft:            var(--wn-gold-soft);
  --pink-soft:            var(--wn-rose-soft);
  --rose:                 var(--wn-rose);
  --bg-main:              var(--wn-canvas);
  --bg-soft:              var(--wn-cream-2);
  --bg-cream:             var(--wn-cream);
  --text-dark:            var(--wn-text);
  --text-soft:            var(--wn-muted);
  --brand-color:          var(--wn-primary);

  --surface:              var(--wn-canvas);
  --surface-elevated:     #FFFFFF;
  --surface-accent:       var(--wn-cream);
  --on-primary:           var(--wn-canvas);
  --on-surface:           var(--wn-text);
  --on-surface-muted:     var(--wn-muted);
  --border-subtle:        rgba(75, 30, 63, 0.08);
  --border-strong:        rgba(75, 30, 63, 0.20);

  --color-success:        var(--wn-success);
  --color-warning:        var(--wn-warning);
  --color-danger:         var(--wn-danger);
}

/* ════════════════════════════════════════════════════════════════════
 * Body baseline
 * ════════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--wn-font-sans);
  font-size: var(--wn-text-base);
  line-height: var(--wn-leading-normal);
  color: var(--wn-text);
  background: var(--wn-canvas);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wn-font-serif);
  color: var(--wn-primary);
  line-height: var(--wn-leading-tight);
}

a {
  color: var(--wn-primary);
  transition: color var(--wn-duration) var(--wn-ease);
}
a:hover {
  color: var(--wn-gold-deep);
}

.wn-tagline {
  font-family: var(--wn-font-tagline);
  font-weight: var(--wn-tagline-weight);
  font-style: var(--wn-tagline-style);
  letter-spacing: var(--wn-tagline-tracking);
  color: var(--wn-muted);
  text-transform: none;
}

.wn-wordmark {
  font-family: var(--wn-font-serif);
  font-weight: 500;
  color: var(--wn-primary);
  letter-spacing: 0.005em;
}

/* ════════════════════════════════════════════════════════════════════
 * Contrast — measured WCAG ratios (Ivory canvas)
 *   primary  (#4B1E3F) on canvas → 12.1 : 1  AAA
 *   text     (#2A1A22) on canvas → 16.4 : 1  AAA
 *   muted    (#6B5A60) on canvas →  5.2 : 1  AA
 *   primary  on cream  (#EAD7C6) →  9.5 : 1  AAA
 *   gold     (#D4AF37) on primary →  5.6 : 1  AA  (use sparingly)
 *   canvas   on primary           → 12.1 : 1  AAA
 *
 * NEVER use --wn-gold for body text on light backgrounds: contrast is
 * only 1.6:1. Gold-on-light is decorative only.
 * ════════════════════════════════════════════════════════════════════ */