/* ==========================================================================
   Alfamedia — tokens.css
   Sumber tunggal untuk warna, tipografi, spacing, radius, shadow, z-index,
   durasi, dan easing. Tidak boleh ada nilai warna mentah di file lain.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- Warna: navy & biru (identitas, kontras) ---------- */
  --color-navy-950: #071a3d;
  --color-navy-900: #0b2357;
  --color-navy-800: #12346b;
  --color-blue-700: #173d7a;
  --color-blue-600: #285595;
  /* Dua tint dari keluarga biru yang sama, khusus untuk mode gelap:
     versi 600/700 terlalu redup di atas bidang gelap. */
  --color-blue-400: #6e9bd8;
  --color-blue-300: #9ec1f0;

  /* ---------- Warna: emas (aksen 5–10%) ---------- */
  --color-gold-500: #f1c23b;
  --color-gold-600: #d7a824;
  --color-gold-100: #fff3c8;

  /* ---------- Warna: bidang terang (65–75%) ---------- */
  --color-paper: #fcfdfe;
  --color-ivory: #f7f4ec;
  --color-blue-50: #eef3f9;

  /* ---------- Warna: teks & garis ---------- */
  --color-ink: #111827;
  --color-text: #263244;
  --color-muted: #5d6878;
  --color-border: #d8e1ec;
  --color-white: #ffffff;

  /* ---------- Peran semantik ---------- */
  --surface-page: var(--color-paper);
  --surface-raised: var(--color-white);
  --surface-warm: var(--color-ivory);
  --surface-cool: var(--color-blue-50);
  --surface-deep: var(--color-navy-950);
  --surface-deep-alt: var(--color-navy-900);

  --text-strong: var(--color-ink);
  --text-body: var(--color-text);
  --text-muted: var(--color-muted);
  --text-on-deep: #ffffff;
  --text-on-deep-muted: rgba(255, 255, 255, 0.74);

  --line-hairline: var(--color-border);
  --line-on-deep: rgba(255, 255, 255, 0.16);
  --accent: var(--color-gold-500);
  --accent-strong: var(--color-gold-600);

  --focus-ring: var(--color-blue-600);
  --focus-ring-on-deep: var(--color-gold-500);

  /* Peran teks dan kontrol */
  --text-number: var(--color-blue-600);
  --text-role: var(--color-blue-700);
  --link-fg: var(--color-navy-900);
  --button-primary-bg: var(--color-navy-900);
  --button-primary-bg-hover: var(--color-navy-950);
  --button-primary-fg: var(--color-white);
  --button-ghost-fg: var(--color-navy-900);

  /* ---------- Atmosfer latar ---------- */
  --grid-line: rgba(18, 52, 107, 0.07);
  --grid-line-soft: rgba(18, 52, 107, 0.045);
  --weave-line: rgba(18, 52, 107, 0.09);
  --hero-glow: rgba(40, 85, 149, 0.16);
  --hero-top: var(--color-blue-50);
  --hero-bottom: var(--color-paper);
  --horizon-line: rgba(18, 52, 107, 0.18);
  --deep-glow: rgba(40, 85, 149, 0.42);
  --frame-edge: rgba(7, 26, 61, 0.12);
  --backdrop: rgba(7, 26, 61, 0.44);
  --network-stroke: var(--color-blue-700);
  --network-node-fill: var(--color-paper);
  --plane-bg: var(--color-navy-950);
  --progress-color: var(--color-blue-600);

  /* Latar dinamis: low-poly + jaringan partikel */
  /* Pratinjau wireframe pada slot "Yang akan masuk katalog" */
  --wire-line: rgba(18, 52, 107, 0.24);
  --wire-fill: rgba(40, 85, 149, 0.08);
  --wire-strong: rgba(18, 52, 107, 0.4);
  --wire-accent-fill: rgba(241, 194, 59, 0.2);

  --poly-stroke: rgba(18, 52, 107, 0.11);
  --poly-fill: rgba(40, 85, 149, 0.055);
  --plexus-dot: rgba(23, 61, 122, 0.42);
  --plexus-line: rgba(23, 61, 122, 0.2);
  --plexus-accent: rgba(215, 168, 36, 0.85);
  --orb-a: rgba(40, 85, 149, 0.16);
  --orb-b: rgba(23, 61, 122, 0.10);
  --signal-stroke: var(--color-gold-600);

  /* Alas netral untuk logo di atas bidang gelap (logo tidak diubah). */
  --brand-plaque: transparent;
  --brand-plaque-pad: 0;

  /* ---------- Tipografi ---------- */
  --font-display: "Plus Jakarta Sans", system-ui, "Segoe UI", -apple-system,
    BlinkMacSystemFont, sans-serif;
  --font-body: "Inter", system-ui, "Segoe UI", -apple-system, BlinkMacSystemFont,
    sans-serif;

  --fs-display: clamp(2.5rem, 1.55rem + 3.75vw, 4.375rem);
  --fs-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.375rem);
  --fs-h2: clamp(1.75rem, 1.36rem + 1.65vw, 2.625rem);
  --fs-h3: clamp(1.1875rem, 1.09rem + 0.42vw, 1.4375rem);
  --fs-body-lg: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;

  --lh-display: 1.04;
  --lh-heading: 1.16;
  --lh-snug: 1.45;
  --lh-body: 1.7;

  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --tracking-caption: 0.1em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --measure-lead: 54ch;
  --measure-body: 68ch;

  /* ---------- Spacing (skala 4px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8rem;

  --section-space: clamp(4.25rem, 2.6rem + 5.6vw, 7rem);
  --section-space-tight: clamp(3.25rem, 2.2rem + 3.4vw, 5rem);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-narrow: 840px;
  --gutter: clamp(1.25rem, 0.7rem + 2.2vw, 2.5rem);
  --grid-gap: clamp(1.5rem, 0.9rem + 2.4vw, 2.75rem);
  --header-height: 4.5rem;

  /* ---------- Radius (maksimal empat tingkat) ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* ---------- Shadow (dipakai terbatas) ---------- */
  --shadow-hairline: 0 1px 0 0 rgba(7, 26, 61, 0.06);
  --shadow-sm: 0 1px 2px rgba(7, 26, 61, 0.05), 0 6px 18px -12px rgba(7, 26, 61, 0.28);
  --shadow-md: 0 2px 4px rgba(7, 26, 61, 0.05), 0 18px 40px -28px rgba(7, 26, 61, 0.35);

  /* ---------- Z-index ---------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-lightbox: 210;
  --z-skip: 300;

  /* ---------- Durasi & easing ---------- */
  --duration-fast: 160ms;
  --duration-normal: 260ms;
  --duration-slow: 420ms;
  --duration-reveal: 720ms;

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Rasio aset ---------- */
  --ratio-portrait: 4 / 5;
}

/* ==========================================================================
   Mode gelap

   Hanya token PERAN yang ditulis ulang — palet dasar di atas tidak berubah,
   dan tidak ada satu pun komponen yang perlu aturan warna tambahan.
   Logo, wordmark, dan favicon tetap memakai warna aslinya; yang berubah
   hanyalah alas di belakangnya (--brand-plaque).
   ========================================================================== */
/* Tema terang adalah bawaan. Mode gelap hanya aktif ketika pengguna
   menekan tombol tema — ditandai atribut data-theme="dark" pada <html>. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-page: #06101f;
  --surface-raised: #0b1729;
  --surface-warm: #0a1424;
  --surface-cool: #0c1a30;
  --surface-deep: #030a16;
  --surface-deep-alt: #061125;

  --text-strong: #f3f6fa;
  --text-body: #d5dde8;
  --text-muted: #99a5b6;

  --line-hairline: rgba(255, 255, 255, 0.13);
  --accent-strong: var(--color-gold-500);
  --focus-ring: var(--color-gold-500);

  --text-number: var(--color-blue-300);
  --text-role: var(--color-blue-300);
  --link-fg: var(--text-strong);
  --button-primary-bg: var(--color-blue-600);
  --button-primary-bg-hover: var(--color-blue-700);
  --button-primary-fg: var(--color-white);
  --button-ghost-fg: var(--text-strong);

  --grid-line: rgba(255, 255, 255, 0.05);
  --grid-line-soft: rgba(255, 255, 255, 0.035);
  --weave-line: rgba(255, 255, 255, 0.06);
  --hero-glow: rgba(40, 85, 149, 0.32);
  --hero-top: #0a1729;
  --hero-bottom: var(--surface-page);
  --horizon-line: rgba(255, 255, 255, 0.14);
  --deep-glow: rgba(40, 85, 149, 0.34);
  --frame-edge: rgba(255, 255, 255, 0.16);
  --backdrop: rgba(2, 7, 16, 0.68);
  --network-stroke: var(--color-blue-400);
  --network-node-fill: var(--surface-raised);
  --plane-bg: var(--color-blue-700);
  --progress-color: var(--color-blue-300);

  --wire-line: rgba(255, 255, 255, 0.24);
  --wire-fill: rgba(158, 193, 240, 0.1);
  --wire-strong: rgba(255, 255, 255, 0.4);
  --wire-accent-fill: rgba(241, 194, 59, 0.24);

  --poly-stroke: rgba(255, 255, 255, 0.09);
  --poly-fill: rgba(110, 155, 216, 0.055);
  --plexus-dot: rgba(158, 193, 240, 0.45);
  --plexus-line: rgba(110, 155, 216, 0.22);
  --plexus-accent: rgba(241, 194, 59, 0.9);
  --orb-a: rgba(40, 85, 149, 0.34);
  --orb-b: rgba(23, 61, 122, 0.26);
  --signal-stroke: var(--color-gold-500);

  --brand-plaque: rgba(255, 255, 255, 0.94);
  --brand-plaque-pad: 5px 9px;

  --shadow-hairline: 0 1px 0 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 18px -12px rgba(0, 0, 0, 0.6);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 40px -28px rgba(0, 0, 0, 0.7);
}

/* Bidang gelap: token peran ditulis ulang, bukan warnanya.
   Footer selalu berupa bidang gelap, jadi ikut memakai aturan yang sama. */
.u-on-deep,
.c-footer {
  --surface-page: var(--color-navy-950);
  --text-strong: var(--text-on-deep);
  --text-body: var(--text-on-deep);
  --text-muted: var(--text-on-deep-muted);
  --line-hairline: var(--line-on-deep);
  --focus-ring: var(--focus-ring-on-deep);

  --wire-line: rgba(255, 255, 255, 0.26);
  --wire-fill: rgba(255, 255, 255, 0.07);
  --wire-strong: rgba(255, 255, 255, 0.42);
  --wire-accent-fill: rgba(241, 194, 59, 0.24);

  --poly-stroke: rgba(255, 255, 255, 0.11);
  --poly-fill: rgba(255, 255, 255, 0.04);
  --plexus-dot: rgba(255, 255, 255, 0.5);
  --plexus-line: rgba(255, 255, 255, 0.2);
  --plexus-accent: rgba(241, 194, 59, 0.9);
}