/* ============================================================
   HEPIDEI — DESIGN TOKENS
   Satu-satunya tempat untuk warna, font, radius, dan bayangan.
   Ubah di sini, bukan di file section.

   Arah desain: "creative studio" — border 2 px, hard shadow,
   sticker, kartu miring. Palet tetap milik Hepidei (rose/ink/
   cream), bukan palet referensi.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- Brand palette ---------- */
  --color-white: #ffffff;
  --color-ink: #2a1e2c;
  --color-ink-soft: #4a364d;
  --color-rose: #a3526a;
  --color-rose-dark: #86405a;
  --color-blush: #e3a9b8;
  --color-blush-soft: #f8e8ec;
  --color-cream: #fbf6f3;
  --color-cream-deep: #f4e9e5;
  --color-paper: #f4dde3;
  --color-mint: #dde9dd;
  --color-sage: #4e6e5d;
  --color-gold: #9a7b2f;
  --color-gold-soft: #f7efd9;

  /* ---------- Semantic colors ---------- */
  --bg: var(--color-cream);
  --ink: var(--color-ink);
  --mute: #6e5c70;
  --line: #e8d8dc;
  --line-ink: var(--color-ink);
  --or: var(--color-rose);
  --hem: var(--color-rose);
  --acc: var(--color-rose);
  --sel: var(--color-blush-soft);
  --card: var(--color-white);
  --petal: var(--color-paper);
  --note: var(--color-blush);
  --note-strong: #edb6c4;
  --notei: var(--color-ink);
  --btn: var(--color-rose);
  --btnh: var(--color-rose-dark);
  --cta: var(--color-ink);
  --ctat: var(--color-cream);
  --glow: rgba(227, 169, 184, 0.65);
  --on-dark: var(--color-cream);
  --on-dark-muted: #d9c4ce;
  --wa: #25d366;
  --wa-dark: #1ebe5b;

  /* ---------- Card tints (rotasi warna kartu) ---------- */
  --tint-rose: var(--color-blush-soft);
  --tint-mint: var(--color-mint);
  --tint-gold: var(--color-gold-soft);
  --tint-paper: var(--color-paper);
  --tint-cream: var(--color-cream-deep);

  /* ---------- Typography ---------- */
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fredoka", "Poppins", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  /* ---------- Layout ---------- */
  --container: 1120px;
  --container-wide: 1240px;
  --container-narrow: 880px;
  --gutter: 20px;
  --section-gap: 96px;

  /* ---------- Shape ---------- */
  --radius-xs: 8px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --border-w: 2px;

  /* ---------- Effects ---------- */
  --shadow-hard-sm: 0 3px 0 0 var(--color-ink);
  --shadow-hard: 0 5px 0 0 var(--color-ink);
  --shadow-hard-lg: 0 9px 0 0 var(--color-ink);
  --shadow-btn: 0 4px 0 0 rgba(42, 30, 44, 0.9);
  --shadow-btn-hover: 0 7px 0 0 rgba(42, 30, 44, 0.9);
  --shadow-card: 0 22px 34px -24px rgba(42, 30, 44, 0.55);
  --shadow-soft: 0 10px 20px -12px rgba(42, 30, 44, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Dark palette (opt-in) ----------
   Landing page dipaksa terang supaya arah desain (cream + ink)
   tidak berubah sendiri mengikuti sistem. Tema gelap hanya aktif
   kalau <html data-theme="dark"> dipasang manual. */
:root[data-theme="dark"] {
  --bg: #1f1622;
  --ink: #fbf6f3;
  --mute: #cdb9c4;
  --line: #4a3a4d;
  --line-ink: #fbf6f3;
  --sel: #3a2a3e;
  --card: #2a1e2c;
  --hem: #e3a9b8;
  --acc: #e3a9b8;
  --petal: #261b2b;
  --btn: #a3526a;
  --btnh: #bc6680;
  --cta: #3a2a3e;
  --ctat: #fbf6f3;
  --glow: rgba(163, 82, 106, 0.5);
  --on-dark: #fbf6f3;
  --on-dark-muted: #d9c4ce;
  --color-cream: #1f1622;
  --color-cream-deep: #261b2b;
  --color-ink: #fbf6f3;
  --shadow-hard-sm: 0 3px 0 0 #fbf6f3;
  --shadow-hard: 0 5px 0 0 #fbf6f3;
  --shadow-hard-lg: 0 9px 0 0 #fbf6f3;
}