/* Pandu News "Kaca Bening": token PRD bagian 5, disalin dari handoff tokens.css.
   Di prototipe ini token ditulis sebagai CSS custom property biasa (tanpa Tailwind), supaya
   mudah dipindah ke template plugin WordPress. Mode gelap: [data-theme="dark"] di <html>. */
:root {
  /* Warna inti (terang) */
  --color-ink: #0f172a;
  --color-ink-2: #1e293b;
  --color-ink-3: #475569;
  --color-muted: #5b6b80;
  --color-line: #e2e8f0;
  --color-line-soft: #eef2f7;
  --color-line-2: #cbd5e1;
  --color-page: #f0f4f8;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-brand: #1d4ed8;
  --color-brand-600: #2563eb;
  --color-brand-50: #eff6ff;
  --color-forest-900: #103e30;
  --color-forest-800: #153f36;
  --color-forest-600: #267357;
  --color-forest-50: #f0f6f2;
  /* Teks dan garis di atas latar hijau muda (kotak Ringkasan, kutipan) */
  --color-forest-ink: #153f36;
  --color-forest-line: #d5e7dc;
  --color-lime: #e6f4ae;
  --color-lime-hover: #f1facf;
  --color-lime-ink: #1e3d29;
  --color-navy-1: #0b1b3f;
  --color-navy-2: #0f2854;
  --color-navy-3: #162f6a;
  --color-danger: #b91c1c;
  --color-danger-line: #fecaca;
  --color-danger-bg: #fef2f2;
  --color-warn-bg: #fef3c7;
  --color-warn-line: #fcd34d;
  --color-warn-ink: #78350f;
  --color-warn-btn: #b45309;
  /* Judul kartu yang sudah dibaca (tetap >= 4,5:1) */
  --color-seen: #475569;
  /* Aksen label seksi (kicker) */
  --color-kicker: var(--color-forest-600);

  /* Kategori: solid / tint / teks di gelap / teks di atas kanvas hero */
  --color-cat-nasional: #1d4ed8;      --color-cat-nasional-tint: #eff6ff;      --color-cat-nasional-dark: #93c5fd;      --color-cat-nasional-canvas: #bfdbfe;
  --color-cat-regional: #0f766e;      --color-cat-regional-tint: #f0fdfa;      --color-cat-regional-dark: #5eead4;      --color-cat-regional-canvas: #5eead4;
  --color-cat-internasional: #4338ca; --color-cat-internasional-tint: #eef2ff; --color-cat-internasional-dark: #a5b4fc; --color-cat-internasional-canvas: #c7d2fe;
  --color-cat-infografis: #c2410c;    --color-cat-infografis-tint: #fff7ed;    --color-cat-infografis-dark: #fdba74;    --color-cat-infografis-canvas: #fdba74;
  --color-cat-analisis: #267357;      --color-cat-analisis-tint: #f0f6f2;      --color-cat-analisis-dark: #86efac;      --color-cat-analisis-canvas: #86efac;
  --color-cat-edukasi: #6d28d9;       --color-cat-edukasi-tint: #f5f3ff;       --color-cat-edukasi-dark: #c4b5fd;       --color-cat-edukasi-canvas: #ddd6fe;
  --color-cat-panduan: #a21caf;       --color-cat-panduan-tint: #fdf4ff;       --color-cat-panduan-dark: #f0abfc;       --color-cat-panduan-canvas: #f5d0fe;
  /* Warna teks kategori di atas latar halaman: solid di terang, versi terang di gelap */
  --color-cat-nasional-text: var(--color-cat-nasional);
  --color-cat-regional-text: var(--color-cat-regional);
  --color-cat-internasional-text: var(--color-cat-internasional);
  --color-cat-infografis-text: var(--color-cat-infografis);
  --color-cat-analisis-text: var(--color-cat-analisis);
  --color-cat-edukasi-text: var(--color-cat-edukasi);
  --color-cat-panduan-text: var(--color-cat-panduan);

  /* Tipografi (variabel font diisi next/font di layout) */
  --font-sans: var(--font-inter, "Inter"), "PanduSans", system-ui, sans-serif;
  --font-accent: var(--font-newsreader, "Newsreader"), Georgia, serif;

  /* Radius */
  --radius-chip: 8px;
  --radius-card: 14px;
  --radius-panel: 20px;
  --radius-canvas: 28px;

  /* Bayangan */
  --shadow-card: 0 2px 12px rgba(15,23,42,.04);
  --shadow-pop: 0 16px 40px rgba(15,23,42,.10);
  --shadow-modal: 0 24px 64px rgba(5,20,60,.24);

  /* Motion */
  --ease-in: cubic-bezier(.2,.8,.3,1);
  --ease-out: cubic-bezier(.4,0,1,1);
  --dur-color: 150ms;
  --dur-card: 250ms;
  --dur-panel: 400ms;

  /* Fokus: biru di latar terang, lime di latar gelap */
  --focus: #2563eb;
  --focus-dark: #e6f4ae;

  /* Kaca (PRD tabel "Tingkat kaca") */
  --glass-canvas-bg: rgba(7,27,39,.40);
  --glass-canvas-border: rgba(255,255,255,.14);
  --glass-canvas-border-hover: rgba(255,255,255,.25);
  --glass-canvas-hi: inset 0 1px 0 rgba(255,255,255,.08);
  --glass-canvas-blur: blur(16px) saturate(140%);
  --glass-photo-bg: rgba(7,27,39,.45);
  --glass-photo-border: rgba(255,255,255,.16);
  --glass-photo-blur: blur(14px);
  /* PRD: .78. Dinaikkan ke .88 karena saat kanvas hero gelap lewat di bawah header, teks kecil
     header turun ke 3,5:1; dengan .88 semua teks header >= 4,5:1 di titik terburuk. */
  --glass-header-bg: rgba(255,255,255,.88);
  --glass-header-blur: blur(20px) saturate(160%);
  --glass-header-line: rgba(15,23,42,.06);
  --glass-modal-bg: rgba(255,255,255,.95);
  --glass-modal-blur: blur(24px);
  --glass-solid-bg: rgba(255,255,255,.72);
  --glass-solid-bg-hover: rgba(255,255,255,.88);
  --glass-solid-hi: inset 0 1px 0 rgba(255,255,255,.6);
  --glass-solid-border: var(--color-line);
  --glass-fallback-opacity: .94;

  --canvas-pandu:
    radial-gradient(ellipse at 8% 5%, #246e50 0%, transparent 48%),
    radial-gradient(ellipse at 100% 100%, #3676df 0%, transparent 58%),
    linear-gradient(115deg, #103e30 0%, #123d43 39%, #173b81 70%, #2154b7 100%);
  --shade-photo: linear-gradient(180deg, rgba(5,19,29,.08) 8%, rgba(5,19,29,.32) 35%, rgba(5,19,29,.92) 74%, #071b27 100%);
  --footer-navy: linear-gradient(135deg, #0b1b3f 0%, #0f2854 50%, #162f6a 100%);

  color-scheme: light;
}

/* Mode gelap (PRD bagian 5 "Mode gelap"). Kanvas hero dan footer tidak berubah. */
[data-theme="dark"] {
  --color-page: #0a1426;
  --color-surface: #111c33;
  --color-surface-2: #0d1830;
  --color-ink: #e5edf7;
  --color-ink-2: #cbd6e6;
  --color-ink-3: #b4c2d6;
  --color-muted: #9fb0c7;
  --color-line: rgba(148,163,184,.18);
  --color-line-soft: rgba(148,163,184,.10);
  --color-line-2: rgba(148,163,184,.30);
  --color-brand: #60a5fa;
  --color-brand-600: #93c5fd;
  --color-brand-50: rgba(96,165,250,.16);
  --color-forest-50: rgba(38,115,87,.20);
  --color-forest-ink: #c8f0d5;
  --color-forest-line: rgba(134,239,172,.25);
  --color-danger: #fca5a5;
  --color-danger-line: rgba(248,113,113,.35);
  --color-danger-bg: rgba(248,113,113,.12);
  --color-warn-bg: rgba(245,158,11,.14);
  --color-warn-line: rgba(251,191,36,.35);
  --color-warn-ink: #fde68a;
  --color-warn-btn: #fbbf24;
  --color-seen: #9fb0c7;
  --color-kicker: #86efac;
  --glass-header-bg: rgba(10,20,38,.88);
  --glass-header-line: rgba(148,163,184,.14);
  --glass-modal-bg: rgba(17,28,51,.95);
  --glass-solid-bg: rgba(17,28,51,.72);
  --glass-solid-bg-hover: rgba(17,28,51,.92);
  --glass-solid-hi: inset 0 1px 0 rgba(255,255,255,.06);
  --glass-solid-border: rgba(148,163,184,.16);
  --focus: #e6f4ae;

  /* Tint kategori di gelap = solid dengan alpha .20; teks kategori memakai versi -dark */
  --color-cat-nasional-tint: rgba(29,78,216,.20);
  --color-cat-regional-tint: rgba(15,118,110,.20);
  --color-cat-internasional-tint: rgba(67,56,202,.20);
  --color-cat-infografis-tint: rgba(194,65,12,.20);
  --color-cat-analisis-tint: rgba(38,115,87,.20);
  --color-cat-edukasi-tint: rgba(109,40,217,.20);
  --color-cat-panduan-tint: rgba(162,28,175,.20);
  --color-cat-nasional-text: var(--color-cat-nasional-dark);
  --color-cat-regional-text: var(--color-cat-regional-dark);
  --color-cat-internasional-text: var(--color-cat-internasional-dark);
  --color-cat-infografis-text: var(--color-cat-infografis-dark);
  --color-cat-analisis-text: var(--color-cat-analisis-dark);
  --color-cat-edukasi-text: var(--color-cat-edukasi-dark);
  --color-cat-panduan-text: var(--color-cat-panduan-dark);

  color-scheme: dark;
}

/* Kelas kategori: mengisi --cat-* yang dipakai badge, ubin, tab, dan titik. */
.pn-cat-nasional      { --cat: var(--color-cat-nasional);      --cat-tint: var(--color-cat-nasional-tint);      --cat-text: var(--color-cat-nasional-text);      --cat-canvas: var(--color-cat-nasional-canvas); }
.pn-cat-regional      { --cat: var(--color-cat-regional);      --cat-tint: var(--color-cat-regional-tint);      --cat-text: var(--color-cat-regional-text);      --cat-canvas: var(--color-cat-regional-canvas); }
.pn-cat-internasional { --cat: var(--color-cat-internasional); --cat-tint: var(--color-cat-internasional-tint); --cat-text: var(--color-cat-internasional-text); --cat-canvas: var(--color-cat-internasional-canvas); }
.pn-cat-infografis    { --cat: var(--color-cat-infografis);    --cat-tint: var(--color-cat-infografis-tint);    --cat-text: var(--color-cat-infografis-text);    --cat-canvas: var(--color-cat-infografis-canvas); }
.pn-cat-analisis      { --cat: var(--color-cat-analisis);      --cat-tint: var(--color-cat-analisis-tint);      --cat-text: var(--color-cat-analisis-text);      --cat-canvas: var(--color-cat-analisis-canvas); }
.pn-cat-edukasi       { --cat: var(--color-cat-edukasi);       --cat-tint: var(--color-cat-edukasi-tint);       --cat-text: var(--color-cat-edukasi-text);       --cat-canvas: var(--color-cat-edukasi-canvas); }
.pn-cat-panduan       { --cat: var(--color-cat-panduan);       --cat-tint: var(--color-cat-panduan-tint);       --cat-text: var(--color-cat-panduan-text);       --cat-canvas: var(--color-cat-panduan-canvas); }