/* ═══════════════════════════════════════════════════════════════════
   galeri.taton — Design tokens
   Sumber: PRD-DESIGN.md §2 (warna, tipografi, spasi, radius, mode gelap)
   dan §5 (motion). Nilai dikutip apa adanya, bukan perkiraan.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── §2.1 Inti — biru & putih ── */
  --c-navy:        #00205c;
  --c-blue:        #5b8ab5;
  --c-blue-soft:   #9bb7d4;
  --c-blue-wash:   #ebf1f6;
  --c-white:       #ffffff;

  /* ── Aksen ── */
  --c-gold:        #857650;
  /* Emas yang dinaikkan luminansinya; satu-satunya emas yang boleh jadi TEKS
     di atas navy. #857650 di atas #00205c hanya 2.9:1 — gagal AA. (§2.1) */
  --c-gold-lift:   #c4b183;

  /* ── Netral, dibiaskan ke arah biru ── */
  --c-ink:         #1c1f26;
  --c-line:        #dee1e7;
  --c-line-strong: #d0d4dd;
  --c-surface-alt: #f7f9fb;

  /* ── Status ── */
  --c-success:     #38792e;
  --c-success-dk:  #2d6324;
  --c-error:       #e2401c;
  --c-error-soft:  #ff9696;

  /* ── Turunan transparan ── */
  --c-navy-05:     rgba(0, 32, 92, .05);
  --c-navy-10:     rgba(0, 32, 92, .10);
  --c-navy-50:     rgba(0, 32, 92, .5);
  --c-blue-wash-a: rgba(155, 183, 212, .1);
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, .12);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, .14);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, .2);

  /* ── §2.5 Token semantik (satu-satunya yang dipakai komponen) ── */
  --bg:            #ffffff;
  --bg-alt:        #ebf1f6;
  --surface:       #ffffff;
  --surface-2:     #f7f9fb;
  --text:          #00205c;
  --text-muted:    #4a6b95;
  --accent:        #857650;
  --accent-ink:    #ffffff;      /* teks di atas aksen */
  --border-c:      #dee1e7;
  --scrim:         rgba(0, 32, 92, .5);
  --on-navy:       #ffffff;
  --on-navy-muted: #9bb7d4;
  /* Kontrol terpilih (checkbox, radio, swatch, badge) — navy di terang,
     emas di gelap; komponen tidak boleh memakai --c-navy langsung untuk ini */
  --control-active:     #00205c;
  --control-active-ink: #ffffff;
  /* Warna "lawan" tombol (hover primer / latar sekunder) — navy pekat tidak
     terbaca di atas latar gelap, jadi digeser luminansinya per tema */
  --btn-contrast:       #00205c;
  --btn-contrast-ink:   #ffffff;

  /* ── §2.2 Tipografi ── */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', 'Inter', system-ui, -apple-system, sans-serif;

  /* Skala fluid 420px → 1280px, formula §2.2 diimplementasikan dengan clamp() */
  --fs-h1-large: clamp(40px, calc(40px + 20 * ((100vw - 420px) / 860)), 60px);
  --fs-h1:       clamp(32px, calc(32px + 22 * ((100vw - 420px) / 860)), 54px);
  --fs-h2:       clamp(20px, calc(20px + 15 * ((100vw - 420px) / 860)), 35px);
  --fs-h3:       clamp(18px, calc(18px +  8 * ((100vw - 420px) / 860)), 26px);
  --fs-body:     clamp(15px, calc(15px +  2 * ((100vw - 420px) / 860)), 17px);
  --fs-button:   clamp(16px, calc(16px +  2 * ((100vw - 420px) / 860)), 18px);
  --fs-small:    14px;
  --fs-tiny:     13px;

  --lh-h1-large: 1.2375;
  --lh-h1:       1.22812;
  --lh-h2:       1.23333;
  --lh-h3:       1.25;
  --lh-body:     1.6;
  --lh-button:   1.20833;

  /* ── §2.3 Spasi ── */
  --space-4: 4px;   --space-8: 8px;    --space-16: 16px;
  --space-24: 24px; --space-32: 32px;  --space-56: 56px;
  --space-80: 80px; --space-120: 120px;

  --wrap:      1280px;
  --wrap-text: 1180px;
  --wrap-prose: 1024px;
  --gutter:    var(--space-24);
  --section-y: var(--space-80);

  /* ── §2.4 Radius & border ── */
  --radius-pill:  203px;
  --radius-card:  8px;
  --radius-input: 3px;
  --radius-tag:   40px;
  --border:       1px solid var(--border-c);

  /* ── §5.1 Motion: durasi ── */
  --dur-hover:  150ms;   /* ganti warna, hover, fokus */
  --dur-micro:  200ms;   /* elemen kecil masuk/keluar */
  --dur-panel:  250ms;   /* modal, drawer, mega menu */
  --dur-panel-lg: 300ms;
  --dur-page:   350ms;   /* transisi antar-halaman */
  --dur-exit:   160ms;   /* keluar ≈ 2/3 durasi masuk */
  --dur-slide:  600ms;   /* cross-fade hero */

  /* ── §5.1 Motion: easing berarah ── */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.7, 0, .84, 0);
  --ease-both: cubic-bezier(.65, 0, .35, 1);
  --spring:    linear(0, .29 3.7%, .55 8%, .79 13%, .93 17%,
                      1.02 22%, 1.05 28%, 1.02 40%, 1 55%, 1);

  --z-header: 100;
  --z-scrim:  200;
  --z-panel:  300;
  --z-toast:  400;
}

@media (min-width: 640px)  { :root { --gutter: 40px; } }
@media (min-width: 1024px) { :root { --gutter: var(--space-80); --section-y: var(--space-120); } }

/* ── §2.5 Mode gelap: redefinisi token, bukan komponen ── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #0a1428;
    --bg-alt:        #0f1d38;
    --surface:       #152640;
    --surface-2:     #10203a;
    --text:          #e8eef6;
    --text-muted:    #9bb7d4;
    --accent:        #c4b183;
    --accent-ink:    #0a1428;
    --border-c:      #20334f;
    --scrim:         rgba(4, 10, 22, .72);
    --shadow-sm:     0 2px 8px rgba(0, 0, 0, .4);
    --shadow-md:     0 4px 16px rgba(0, 0, 0, .45);
    --shadow-lg:     0 8px 32px rgba(0, 0, 0, .55);
    /* Navy transparan tidak terlihat di atas latar gelap — geser ke biru muda */
    --c-navy-05:     rgba(155, 183, 212, .08);
    --c-navy-10:     rgba(155, 183, 212, .16);
    --control-active:     #c4b183;
    --control-active-ink: #0a1428;
    --btn-contrast:       #2c4a7c;
    --btn-contrast-ink:   #ffffff;
  }
}

:root[data-theme="dark"] {
  --bg:            #0a1428;
  --bg-alt:        #0f1d38;
  --surface:       #152640;
  --surface-2:     #10203a;
  --text:          #e8eef6;
  --text-muted:    #9bb7d4;
  --accent:        #c4b183;
  --accent-ink:    #0a1428;
  --border-c:      #20334f;
  --scrim:         rgba(4, 10, 22, .72);
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, .4);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, .55);
  --c-navy-05:     rgba(155, 183, 212, .08);
  --c-navy-10:     rgba(155, 183, 212, .16);
  --control-active:     #c4b183;
  --control-active-ink: #0a1428;
  --btn-contrast:       #2c4a7c;
  --btn-contrast-ink:   #ffffff;
}

:root[data-theme="light"] {
  --bg:            #ffffff;
  --bg-alt:        #ebf1f6;
  --surface:       #ffffff;
  --surface-2:     #f7f9fb;
  --text:          #00205c;
  --text-muted:    #4a6b95;
  --accent:        #857650;
  --accent-ink:    #ffffff;
  --border-c:      #dee1e7;
  --scrim:         rgba(0, 32, 92, .5);
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, .12);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, .14);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, .2);
  --c-navy-05:     rgba(0, 32, 92, .05);
  --c-navy-10:     rgba(0, 32, 92, .10);
  --control-active:     #00205c;
  --control-active-ink: #ffffff;
  --btn-contrast:       #00205c;
  --btn-contrast-ink:   #ffffff;
}

/* ── §5.4 Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Perubahan opacity tetap boleh — yang memicu vestibular adalah gerak & skala.
     .hero__slide (bukan .hero__img) yang membawa transisi opacity pergantian slide. */
  .card__media img, .hero__slide, .hero__body, .detail__stage img {
    transition: opacity var(--dur-micro) linear !important;
  }
}