/**
 * ╔══════════════════════════════════════════════════════════════╗
 * ║              DESIGN TOKENS — SINGLE SOURCE                  ║
 * ║  ALL color hex values live here and ONLY here.              ║
 * ║  To retheme the site, change values in this file only.      ║
 * ║  (config.js theme{} overrides are applied on top at runtime)║
 * ╚══════════════════════════════════════════════════════════════╝
 */

:root {
  /* ── Cream palette ───────────────────────────────────────────── */
  --cream:        #E1DED4;
  --cream-deep:   #B6B0A0;
  --cream-light:  #E8DCC7;
  --cream-card:   #E8DCC7;

  /* ── Primary accent — dusty rose ─────────────────────────────── */
  --primary:       #B77D6C;
  --primary-light:  #D0A99A;
  --primary-deep:   #8B5C3A;

  /* ── Gold scale → warm wood tones ───────────────────────────────── */
  --gold:         #8B5C3A;
  --gold-light:   #B77D6C;
  --gold-bright:  #E8DCC7;
  --clay:         #8B5C3A;

  /* ── Ink (text) — deep forest for strong, formal contrast ───────── */
  --ink:          #1B1F16;
  --ink-soft:     #69614D;
  --ink-muted:    #8C7C65;

  /* ── Gate scene ────────────────────────────────────────────────── */
  --gate-bg:        #E1DED4;
  --gate-door:      #8B5C3A;
  --gate-door-dark: #69614D;
  --gate-trim:      #8B5C3A;

  /* ── Textures (inline SVG, no asset files) ─────────────────────── */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  /* ── Gold gradient (metallic foil — for text & headings) ───────── */
  --gold-gradient: linear-gradient(
    135deg,
    #8B5C3A 0%,
    #E8DCC7 32%,
    #B77D6C 54%,
    #E8DCC7 74%,
    #8B5C3A 100%
  );

  /* ── Clay gradient (bronze — decorative elements) ────────────────── */
  --clay-gradient: linear-gradient(
    135deg,
    #8B5C3A 0%,
    #E8DCC7 32%,
    #8B5C3A 54%,
    #B77D6C 74%,
    #8B5C3A 100%
  );

  /* ── Per-element text colors (override via config.js theme) ────── */
  --text-eyebrow:       var(--ink-soft);
  --text-name-ar:       var(--primary);
  --text-name-en:       var(--ink-soft);
  --text-amp:           var(--gold-light);
  --text-invite-line:   var(--ink-soft);
  --text-date-main:     var(--ink);
  --text-date-time:     var(--ink-soft);
  --text-venue-name:    var(--ink);
  --text-venue-addr:    var(--ink-soft);
  --text-cd-num:        var(--cream-light);
  --text-cd-lbl:        var(--gold-light);
  --text-verse-ar:      var(--ink);
  --text-verse-en:      var(--ink-soft);
  --text-verse-ref:     var(--gold);
  --text-section-label: var(--cream-light);
  --text-footer:        var(--ink);
  --text-gate-hint:     var(--ink-soft);

  /* ── Font stacks ─────────────────────────────────────────────── */
  --serif:      "Cormorant Garamond", Georgia, serif;
  --ar-display: "Aref Ruqaa", serif;
  --ar-body:    "Amiri", serif;
  --kufi:       "Reem Kufi", sans-serif;

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-serve:    cubic-bezier(0.4, 0, 0.5, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reduced motion — disable all animations globally */
@media (prefers-reduced-motion: reduce) {
  .petal,
  .eq-bar,
  .gate-scene,
  .gate-door,
  .gate-ornament,
  .gate-hint,
  .gate-welcome,
  .gate-light,
  .gate-flash,
  .sparkle {
    animation: none !important;
  }
  .gate-door,
  .gate-ornament,
  .gate-scene,
  .gate-light,
  .invitation {
    transition-duration: 0.01ms !important;
  }
  .invitation {
    transform: none !important;
    filter: none !important;
  }
  #invitation-card,
  #invitation-card .inner > *,
  #invitation-card .orn svg {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}