/* ============================================================
   Template tampilan — dipilih di admin → Halaman Utama
   Setiap template hanya menimpa token warna/font dari style.css,
   sehingga seluruh halaman ikut berubah tanpa duplikasi layout.
   ============================================================ */

/* ---------- 1. Ivory Elegant (default, sudah di style.css) ---------- */

/* ---------- 2. Modern Minimal ---------- */
body[data-theme="mono"] {
  --bg: #ffffff;
  --bg-2: #f4f4f3;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --ink: #141414;
  --muted: #6b6b6b;
  --gold: #2f3437;
  --gold-soft: #5a6165;
  --line: rgba(20, 20, 20, 0.16);
  --line-soft: rgba(20, 20, 20, 0.08);
  --serif: var(--sans);
}
body[data-theme="mono"]::before { opacity: 0.35; }
body[data-theme="mono"] h1,
body[data-theme="mono"] h2,
body[data-theme="mono"] h3,
body[data-theme="mono"] h4 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.028em;
}
body[data-theme="mono"] h1 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); line-height: 1.06; }
body[data-theme="mono"] h1 em { font-style: normal; }
body[data-theme="mono"] .hero__media { border-radius: 4px; }
body[data-theme="mono"] .card,
body[data-theme="mono"] .stat-card,
body[data-theme="mono"] .form-card,
body[data-theme="mono"] .shot,
body[data-theme="mono"] .portrait-frame,
body[data-theme="mono"] .photo-tile,
body[data-theme="mono"] .pick { border-radius: 6px; }
body[data-theme="mono"] .brand,
body[data-theme="mono"] .pack__price,
body[data-theme="mono"] .quote,
body[data-theme="mono"] .stat-card strong,
body[data-theme="mono"] .stat strong,
body[data-theme="mono"] .hero-meta div strong { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em; }
body[data-theme="mono"] .eyebrow { letter-spacing: 0.22em; }
body[data-theme="mono"] .brand-mark { border-radius: 4px; }

/* ---------- 3. Soft Sage ---------- */
body[data-theme="sage"] {
  --bg: #f8f9f6;
  --bg-2: #eef1ea;
  --surface: #ffffff;
  --surface-2: #f6f8f3;
  --ink: #1e241f;
  --muted: #66705f;
  --gold: #5c7052;
  --gold-soft: #7d916f;
  --line: rgba(30, 36, 31, 0.14);
  --line-soft: rgba(30, 36, 31, 0.075);
  --ok: #42705a;
}
body[data-theme="sage"] .brand-mark { background: rgba(92, 112, 82, 0.08); }
body[data-theme="sage"] .hero__media { border-radius: 28px 28px 8px 8px; }

/* ---------- 4. Blush Terracotta ---------- */
body[data-theme="blush"] {
  --bg: #fdf8f5;
  --bg-2: #f8ece5;
  --surface: #ffffff;
  --surface-2: #fdf5f1;
  --ink: #241a15;
  --muted: #7b665c;
  --gold: #9c5735;
  --gold-soft: #b87c56;
  --line: rgba(36, 26, 21, 0.14);
  --line-soft: rgba(36, 26, 21, 0.075);
}
body[data-theme="blush"]::before {
  background:
    radial-gradient(760px 460px at 8% -8%, rgba(192, 133, 97, 0.14), transparent 62%),
    radial-gradient(680px 420px at 96% 2%, rgba(169, 99, 63, 0.08), transparent 66%);
}
body[data-theme="blush"] .hero__media { border-radius: 120px 120px 14px 14px; }

/* ---------- 5. Editorial Navy ---------- */
body[data-theme="navy"] {
  --bg: #f7f8fa;
  --bg-2: #eceff4;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --ink: #161d2b;
  --muted: #5f6879;
  --gold: #2c3e5d;
  --gold-soft: #4a5f85;
  --line: rgba(22, 29, 43, 0.15);
  --line-soft: rgba(22, 29, 43, 0.075);
}
body[data-theme="navy"] .eyebrow { letter-spacing: 0.3em; }
body[data-theme="navy"] .hero__media { border-radius: 2px; }
body[data-theme="navy"] .btn { border-radius: 3px; }
body[data-theme="navy"] .btn--sm { border-radius: 3px; }
body[data-theme="navy"] .card,
body[data-theme="navy"] .form-card,
body[data-theme="navy"] .shot,
body[data-theme="navy"] .portrait-frame { border-radius: 4px; }
body[data-theme="navy"] .chip { border-radius: 3px; }
body[data-theme="navy"] .hero h1 { letter-spacing: -0.01em; }