/* ── Tema Gelap (lalai) ──────────────────────────────────────────────────── */
:root {
  --ink:          #10131c;
  --ink-2:        #171c29;
  --ink-3:        #232a3c;
  --ink-4:        #333c54;
  --gold:         #c79a5b;
  --gold-bright:  #e8c98a;
  --gold-dim:     #8a6a3a;
  --cream:        #f7f2e6;
  --cream-2:      #eee4cf;
  --text-dark:    #201c14;
  --text-muted:   #6b6255;
  --text-light:   #f2ede0;
  --text-muted-light: #a9a08c;
  --line-dark:    rgba(232, 201, 138, .18);
  --line-light:   rgba(32, 28, 20, .12);

  /* Komponen r,g,b untuk overlay lutsinar (rgba(var(--x-rgb), alpha)) */
  --surface-strong-rgb: 16, 19, 28;
  --on-strong-rgb:      242, 237, 224;

  /* Warna tetap utk teks/overlay ATAS GAMBAR hero — sengaja tak ikut suis tema terang/gelap,
     sebab gambar foto sendiri tak bertukar warna; kekalkan gaya "gelap" supaya kontras terjamin. */
  --hero-on-photo:        #f5f0e3;
  --hero-on-photo-rgb:    245, 240, 227;
  --hero-on-photo-muted:  rgba(245, 240, 227, .82);
  --hero-on-photo-eyebrow:#e8c98a;
  --hero-photo-overlay:
    linear-gradient(to right, rgba(16,19,28,.49) 0%, rgba(16,19,28,.23) 45%, rgba(16,19,28,.05) 72%, transparent 88%),
    linear-gradient(to bottom, rgba(16,19,28,.04) 0%, rgba(16,19,28,.11) 40%, rgba(16,19,28,.45) 78%, rgba(16,19,28,.68) 100%);

  /* Kecerunan komposit — berbeza struktur ikut tema, bukan sekadar tukar warna */
  --hero-gradient: radial-gradient(100% 80% at 70% -10%, rgba(199,154,91,.6), transparent 65%), linear-gradient(to bottom, #6b4f2a 0%, #3a2e1c 30%, var(--ink-2) 62%, var(--ink) 100%);
  --ph-art-gradient: radial-gradient(120% 140% at 20% 0%, #3a2f1c 0%, var(--ink-2) 45%, var(--ink) 100%);
  --ph-art-glow: radial-gradient(60% 60% at 75% 20%, rgba(199,154,91,.35), transparent 70%);
  --ph-art-skyline-color: rgba(16,19,28,.85);
  --cta-gradient: linear-gradient(120deg, var(--ink) 0%, #241d12 100%);
  --testi-card-bg: rgba(242,237,224,.04);
  --testi-card-shadow: none;

  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Inter", -apple-system, sans-serif;

  --container: 1180px;
  --header-height: 78px;
  --top-bar-height: 40px;
  --radius-sm: 3px;
  --radius-md: 6px;

  --shadow-card: 0 18px 40px -20px rgba(16, 19, 28, .45);
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Emas terang tetap — untuk aksen di atas permukaan "dalam" yang sentiasa gelap
     (cth: cta-banner-deep), tidak ditakrif semula dalam tema terang secara sengaja. */
  --gold-on-deep: #e8c98a;
}

/* ── Tema Terang ──────────────────────────────────────────────────────────
   Token yang sama, nilai berlainan — komponen dalam style.css tidak perlu
   diubah kerana semuanya rujuk token, bukan warna literal. */
:root[data-theme="light"] {
  --ink:          #ffffff;
  --ink-2:        #faf7f0;
  --ink-3:        #f2ecdd;
  --ink-4:        #e8dcc4;
  --gold:         #a97d3d;
  --gold-bright:  #8a6a3a;
  --gold-dim:     #8a6a3a;
  --cream:        #faf7f0;
  --cream-2:      #f2ecdd;
  --text-dark:    #2a2113;
  --text-muted:   #726753;
  --text-light:   #2a2113;
  --text-muted-light: #726753;
  --line-dark:    rgba(42, 33, 19, .14);
  --line-light:   rgba(42, 33, 19, .10);

  --surface-strong-rgb: 255, 255, 255;
  --on-strong-rgb:      42, 33, 19;

  --hero-gradient: radial-gradient(100% 80% at 70% -10%, #f4e3c2 0%, transparent 65%), linear-gradient(to bottom, #fdf9ef 0%, #f4e9d2 30%, var(--ink-2) 62%, var(--ink) 100%);
  --ph-art-gradient: linear-gradient(135deg, var(--ink-3) 0%, #e9dcc0 100%);
  --ph-art-glow: radial-gradient(60% 60% at 75% 20%, rgba(169,125,61,.22), transparent 70%);
  --ph-art-skyline-color: rgba(255,255,255,.6);
  --cta-gradient: linear-gradient(120deg, #4d3324 0%, #3a2618 100%);
  --testi-card-bg: #ffffff;
  --testi-card-shadow: var(--shadow-card);

  --shadow-card: 0 18px 40px -22px rgba(42, 33, 19, .22);
}