/* ════════════════════════════════════════════════════════════════
   MUBAARAK STUDIO — Design System (consolidated for concept prototypes)
   Source of truth: claude.ai/design "Mubaarak Design System".
   Bespoke wedding-stationery & celebration-design studio.
   ════════════════════════════════════════════════════════════════ */

/* ── Fonts — brand faces now licensed via Adobe Fonts (kit jmk2rob):
      arpona (display) · bickham-script-pro-3 (script) · Montserrat body.
      Cormorant/Pinyon kept as fallbacks (Adobe kit must allow-list this deploy's
      domain — and localhost — or the real faces won't load). ── */
@import url('https://use.typekit.net/yxt8fof.css');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,400..600&family=Montserrat:wght@300;400;500;600;700&family=Pinyon+Script&display=swap');

:root {
  /* ── Brand base palette ─────────────────────────────────────── */
  --maroon:        #6C131E;  /* Primary brand (LOCKED) */
  --maroon-deep:   #51161B;  /* darker shade for depth */
  --gold:          #B38C45;  /* Antique gold — primary accent */
  --gold-soft:     #D5B471;  /* Soft gold — gradient pair / lighter accent */
  --champagne:     #F3D8B4;  /* Champagne — light accent */
  --ivory:         #FFFAF1;  /* Ivory — background / paper */
  --taupe:         #CCC0B2;  /* Warm taupe — neutral */
  --terracotta:    #994321;  /* Terracotta — secondary accent */
  --plum-black:    #2A1E28;  /* Plum-black — text / near-black */

  /* ── Tints & shades ─ */
  --maroon-900:    #3D0F15;
  --maroon-700:    #51161B;
  --maroon-600:    #6C131E;
  --maroon-500:    #872230;
  --ivory-shade:   #F5ECDD;
  --champagne-50:  #FBEEDB;
  --gold-tint:     #E7D3A8;
  --taupe-soft:    #E4DCD0;

  /* ── Metallic gold gradient (logo / luxe accents only) ── */
  --grad-gold: linear-gradient(135deg, #E7D3A8 0%, #D5B471 32%, #B38C45 64%, #8A6A30 100%);
  --grad-gold-text: linear-gradient(100deg, #C9A35A 0%, #E3CB91 38%, #B38C45 70%, #9A7634 100%);

  /* ── Semantic aliases ── */
  --bg-page:       var(--ivory);
  --bg-paper:      #FFFFFF;
  --bg-raised:     var(--ivory-shade);
  --bg-invert:     var(--maroon);
  --bg-invert-deep:var(--maroon-deep);
  --text-primary:  var(--plum-black);
  --text-body:     #45323D;
  --text-muted:    #8C7E84;
  --text-on-dark:  var(--ivory);
  --text-on-dark-muted: #E0CFC0;
  --text-gold:     var(--gold);
  --accent:        var(--gold);
  --accent-2:      var(--terracotta);
  --line:          var(--taupe-soft);
  --line-gold:     var(--gold-tint);
  --line-on-dark:  rgba(243,216,180,0.28);
  --focus-ring:    rgba(179,140,69,0.55);

  /* ── Type ── */
  --font-display: 'arpona', 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  --font-heading: 'arpona', 'Fraunces', 'Cormorant Garamond', Georgia, serif;  /* wordmark/headline = Arpona (logo face); Fraunces = fallback */
  --font-body:    'Montserrat', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-script:  'bickham-script-pro-3', 'Pinyon Script', cursive;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;
  --fs-display:   clamp(56px, 8vw, 104px);
  --fs-h1:        clamp(40px, 5vw, 64px);
  --fs-h2:        clamp(30px, 3.4vw, 44px);
  --fs-h3:        26px;
  --fs-h4:        21px;
  --lh-display:   1.02;
  --lh-heading:   1.12;
  --fs-lead:      19px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-caption:   12.5px;
  --lh-body:      1.7;
  --lh-tight:     1.45;
  --fs-eyebrow:   12.5px;
  --tracking-eyebrow: 0.34em;
  --tracking-wordmark: 0.42em;
  --tracking-label:   0.16em;
  --tracking-body:    0.005em;
  --fs-script:    clamp(34px, 4.5vw, 58px);

  /* ── Spacing & layout ── */
  --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px; --space-lg:24px;
  --space-xl:40px; --space-2xl:64px; --space-3xl:96px; --space-4xl:140px;
  --container:      1200px;
  --container-text: 720px;
  --gutter:         clamp(20px, 5vw, 64px);
  --section-y:      clamp(64px, 9vw, 140px);

  /* ── Effects ── */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-pill:999px;
  --radius-arch: 50% 50% 12px 12px / 38% 38% 12px 12px; /* palace/invite die-cut arch */
  --border-hair:  1px solid var(--line);
  --border-gold:  1px solid var(--gold-tint);
  --border-gold-strong: 1.5px solid var(--gold);
  --border-on-dark: 1px solid var(--line-on-dark);
  --shadow-xs:  0 1px 2px rgba(42,30,40,0.05);
  --shadow-sm:  0 2px 10px rgba(42,30,40,0.06);
  --shadow-md:  0 10px 30px -12px rgba(42,30,40,0.16);
  --shadow-lg:  0 26px 60px -22px rgba(42,30,40,0.26);
  --shadow-gold:0 18px 44px -20px rgba(138,106,48,0.30);
  --ease-soft:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:180ms; --dur-base:320ms; --dur-slow:560ms;
}