/* ==========================================================================
   Ported from codebases/wordpress/hod-redesign-prototype/css/style.css
   (lines 1-203: :root defaults, the four [data-theme] mood blocks, and the
   theme-swap cross-fade transition wiring). See base.css for the rest of
   the prototype's stylesheet (component/layout rules). Do not edit the
   prototype file from this theme — port changes back here by hand.
   ========================================================================== */

/* Jedira — client-purchased licensed webfont, self-hosted (see
   assets/fonts/jedira/ and its accompanying license notice from the
   MyFonts webfont kit). Used for all title/heading type per the client's
   redesign feedback — see hod_theme_assets() in functions.php for the
   Google Fonts (Fraunces/Cormorant/Inter) enqueue this supplements. */
@font-face {
  font-family: "Jedira";
  src: url("../fonts/jedira/jedira-regular.woff2") format("woff2"),
       url("../fonts/jedira/jedira-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jedira";
  src: url("../fonts/jedira/jedira-italic.woff2") format("woff2"),
       url("../fonts/jedira/jedira-italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ==========================================================================
   House of Dipali — Phase 1 Visual Prototype
   Design direction: luxury editorial, South Asian wedding/event decor,
   dark chocolate / off-white palette, serif display type, cinematic
   gallery treatment, subtle motion, mobile-first inquiry flow.
   ========================================================================== */

/* ==========================================================================
   Round 3 — Theme system.

   Four decor moods are fully defined below; "Chocolate Rose" is the
   permanent default palette. Every theme redefines the same variable
   set, so any component that already reads these variables re-themes
   automatically — no per-component theme code needed.
   ========================================================================== */

:root,
[data-theme="chocolate-rose"] {
  /* Palette — Chocolate Rose (default) */
  --chocolate: #2b1620;
  --chocolate-soft: #3f2530;
  --chocolate-tint: #5c3540;
  --chocolate-deep: #190d13;
  --offwhite: #faf3ef;
  --offwhite-warm: #f3e2df;
  --offwhite-rgb: 250, 243, 239;
  --ink: #2b1620;
  --ink-soft: #5c4048;
  --ink-rgb: 43, 22, 32;
  --ink-deep-rgb: 25, 13, 19;
  --accent-marigold: #c98a6a;
  --accent-terracotta: #b0555f;
  --accent-rose: #d98c6d;
  --accent-ember: #c96f7a;
  --accent-candle: #f0c8b8;
  --ph-grad-1: #55303c;
  --ph-grad-2: #2b1620;
  --ph-grad-3: #190d13;
  --theme-particle-1: #e8a5a0;
  --theme-particle-2: #d98c6d;
  --theme-particle-3: #c98a6a;
  --theme-particle-4: #f0c8b8;
}

[data-theme="emerald-mehndi"] {
  /* Palette — Emerald Mehndi: deep jade greens, antique mehndi gold,
     warm henna-paper ivory. Bolder cultural signal than Round 2. */
  --chocolate: #0f2420;
  --chocolate-soft: #1c3a32;
  --chocolate-tint: #2c4d43;
  --chocolate-deep: #081513;
  --offwhite: #f5f1e4;
  --offwhite-warm: #e9e0c4;
  --offwhite-rgb: 245, 241, 228;
  --ink: #10231f;
  --ink-soft: #3f584f;
  --ink-rgb: 16, 35, 31;
  --ink-deep-rgb: 8, 21, 19;
  --accent-marigold: #c9a13b;
  --accent-terracotta: #4d8f6f;
  --accent-rose: #7db593;
  --accent-ember: #d4b56a;
  --accent-candle: #efe0a8;
  --ph-grad-1: #2c4d43;
  --ph-grad-2: #0f2420;
  --ph-grad-3: #081513;
  --theme-particle-1: #d4b56a;
  --theme-particle-2: #6fae86;
  --theme-particle-3: #efe0a8;
  --theme-particle-4: #4d8f6f;
}

[data-theme="moonlit-ivory"] {
  /* Palette — Moonlit Ivory: the one light-leaning mood. Deep surfaces
     shift from chocolate-brown to a cool midnight slate; the "candle"
     light becomes cool moonlight/silver instead of warm marigold. */
  --chocolate: #232a35;
  --chocolate-soft: #323b49;
  --chocolate-tint: #454f5f;
  --chocolate-deep: #14181f;
  --offwhite: #f3f1ec;
  --offwhite-warm: #e8e2d3;
  --offwhite-rgb: 243, 241, 236;
  --ink: #20242c;
  --ink-soft: #565f6b;
  --ink-rgb: 35, 42, 53;
  --ink-deep-rgb: 20, 24, 31;
  --accent-marigold: #8b8fc4;
  --accent-terracotta: #6b7aa3;
  --accent-rose: #a3aed4;
  --accent-ember: #cbb994;
  --accent-candle: #dbe1f0;
  --ph-grad-1: #454f5f;
  --ph-grad-2: #232a35;
  --ph-grad-3: #14181f;
  --theme-particle-1: #c9d4e8;
  --theme-particle-2: #e3e6ef;
  --theme-particle-3: #cbb994;
  --theme-particle-4: #8b8fc4;
}

[data-theme="royal-plum"] {
  /* Palette — Royal Plum: deep aubergine + antique gold, the most
     jewel-toned/regal option. */
  --chocolate: #2a1230;
  --chocolate-soft: #3d1d44;
  --chocolate-tint: #532a5c;
  --chocolate-deep: #180a1c;
  --offwhite: #f6f0f2;
  --offwhite-warm: #ecdde4;
  --offwhite-rgb: 246, 240, 242;
  --ink: #241128;
  --ink-soft: #5c4658;
  --ink-rgb: 36, 17, 40;
  --ink-deep-rgb: 24, 10, 28;
  --accent-marigold: #c79a4b;
  --accent-terracotta: #8b3a62;
  --accent-rose: #a35c8a;
  --accent-ember: #b06a97;
  --accent-candle: #e0c48a;
  --ph-grad-1: #532a5c;
  --ph-grad-2: #2a1230;
  --ph-grad-3: #180a1c;
  --theme-particle-1: #d4af6a;
  --theme-particle-2: #c17ba0;
  --theme-particle-3: #e0c48a;
  --theme-particle-4: #a35c8a;
}

:root {
  --line: rgba(var(--ink-rgb), 0.14);
  --line-on-dark: rgba(var(--offwhite-rgb), 0.18);

  /* Transition so theme swaps feel like a considered fade, not a flash. */
  --theme-transition: background-color 0.6s var(--ease), color 0.6s var(--ease), border-color 0.6s var(--ease);

  /* Fixed .site-header's real rendered height (1.3rem vertical padding +
     the 48px logo) — used as an exact clearance amount wherever content
     needs to start below the header, instead of an approximated vh-based
     gap. Kept as one variable so header and clearance can never drift out
     of sync if header sizing changes later. */
  --header-height: 89px;

  /* Type — Round 2: Fraunces (editorial display serif, optical sizing)
     paired with Cormorant Garamond italic for emotive accents/quotes,
     and Inter for body/UI. Fraunces reads as warmer and more
     expressive than a generic geometric display serif at large sizes,
     which suits hand-crafted floral/decor storytelling. */
  --font-display: "Jedira", "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-accent: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Rhythm */
  --section-pad: clamp(1.75rem, 3vw, 3.5rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius-lg: 2px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slow: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: var(--theme-transition);
}

/* Theme swaps fade the surfaces that carry the most color so cycling
   through moods (theme switcher) reads as a considered dissolve, not
   a jarring flash. */
.site-header,
.section-dark,
.trust-strip,
.card,
.ph,
.form-card,
.contact-info-card,
.arch-frame,
.mobile-nav {
  transition: var(--theme-transition), transform 0.35s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  body,
  .site-header,
  .section-dark,
  .trust-strip,
  .card,
  .ph,
  .form-card,
  .contact-info-card,
  .arch-frame,
  .mobile-nav {
    transition: none;
  }
}