/**
 * Token desain — Pelatihan Elnusa 2026 (slide 16:9, 1920×1080)
 * Acuan manusia: ACUAN_DESAIN.md
 *
 * Warna utama diekstrak dari logo horizontal resmi EPN (Feb 2025).
 * Biru #0070BB · merah #E03E3E · hijau-lime #B8CA11.
 */
@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/OpenSans-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/OpenSans-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/OpenSans-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("assets/fonts/OpenSans-ExtraBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  /* —— Elnusa Petrofin (logo resmi) —— */
  --epn-red: #e03e3e;
  --epn-blue: #0070bb;
  --epn-green: #b8ca11;
  --epn-red-deep: #a92a2a;
  --epn-blue-deep: #00568f;
  --epn-green-deep: #66720a;

  /* —— Warna operasional di situs resmi (sekunder) —— */
  --epn-blue-soft: #598ebf;
  --epn-operational-green: #2ca25f;
  --epn-green-mint: #99d8c9;
  --epn-green-bright: #c4fb6d;

  /* Alias operasional + kompat class slide (--teal / --lime) */
  --pertamina-red: var(--epn-red);
  --pertamina-blue: var(--epn-blue);
  --pertamina-green: var(--epn-green);
  --pertamina-blue-deep: var(--epn-blue-deep);
  --pertamina-green-deep: var(--epn-green-deep);
  --pertamina-red-deep: var(--epn-red-deep);
  --teal: var(--epn-blue);
  --teal-deep: var(--epn-blue-deep);
  --lime: var(--epn-green);

  /* —— Netral slide —— */
  --ink: #102a3d;
  --ink-soft: #24465e;
  --paper: #eef6fb;
  --card: #ffffff;
  --line: #bfd9ea;
  --muted: #557083;
  --white: #ffffff;

  /* —— Permukaan gelap (depan / akhir / stage) —— */
  --stage-bg: var(--epn-blue-deep);
  --on-dark-primary: var(--white);
  --on-dark-secondary: rgba(255, 255, 255, 0.9);
  --on-dark-muted: rgba(255, 255, 255, 0.78);
  --on-dark-foot: rgba(255, 255, 255, 0.82);
  --on-dark-foot-copy: rgba(255, 255, 255, 0.64);
  --glass-fill: rgba(255, 255, 255, 0.11);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-border-strong: rgba(255, 255, 255, 0.3);
  --foot-border-dark: rgba(255, 255, 255, 0.28);

  /* —— Gradasi slide gelap (dominan biru logo EPN) —— */
  --gradient-depan: radial-gradient(
      920px 680px at 110% -5%,
      rgba(184, 202, 17, 0.28),
      transparent 60%
    ),
    linear-gradient(150deg, var(--epn-blue-deep) 0%, var(--epn-blue) 100%);
  --gradient-akhir: radial-gradient(
      700px 480px at -10% 110%,
      rgba(184, 202, 17, 0.32),
      transparent 60%
    ),
    radial-gradient(
      520px 360px at 105% 0%,
      rgba(224, 62, 62, 0.34),
      transparent 55%
    ),
    linear-gradient(145deg, var(--epn-blue-deep), var(--epn-blue));

  /* —— Model latar (selain sampul & penutup) ——
     Biru = struktur, hijau-lime = sorot, merah = pengingat.
     Opacity rendah supaya tetap “lab dokumentasi”, bukan neon. */
  --bg-paper: var(--paper);
  --bg-wash: radial-gradient(
      1280px 900px at 100% 0%,
      rgba(0, 112, 187, 0.4),
      transparent 66%
    ),
    var(--paper);
  --bg-highlight: radial-gradient(
      1180px 860px at 0% 100%,
      rgba(184, 202, 17, 0.58),
      transparent 60%
    ),
    var(--paper);
  --bg-alert: radial-gradient(
      1080px 780px at 100% 0%,
      rgba(224, 62, 62, 0.4),
      transparent 62%
    ),
    var(--paper);
  --bg-mesh: radial-gradient(
      1000px 720px at 100% 0%,
      rgba(0, 112, 187, 0.36),
      transparent 60%
    ),
    radial-gradient(
      980px 720px at 0% 100%,
      rgba(184, 202, 17, 0.5),
      transparent 58%
    ),
    radial-gradient(
      680px 500px at 100% 100%,
      rgba(224, 62, 62, 0.28),
      transparent 60%
    ),
    var(--paper);
  --bg-band: linear-gradient(
    90deg,
    var(--epn-blue) 0 20px,
    var(--epn-red) 20px 30px,
    var(--epn-green) 30px 38px,
    var(--paper) 38px
  );
  --bg-grid: linear-gradient(rgba(0, 112, 187, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 112, 187, 0.11) 1px, transparent 1px);
  --bg-field: radial-gradient(
      720px 480px at 104% -8%,
      rgba(184, 202, 17, 0.22),
      transparent 58%
    ),
    linear-gradient(160deg, var(--epn-blue-deep) 0%, var(--epn-blue) 100%);
  --bg-ink: radial-gradient(
      740px 500px at 108% -8%,
      rgba(184, 202, 17, 0.28),
      transparent 56%
    ),
    linear-gradient(
      165deg,
      var(--ink) 0%,
      color-mix(in srgb, var(--ink) 78%, var(--epn-blue-deep)) 100%
    );

  /* —— Panel template = tiga warna logo + netral dokumen —— */
  --accent-prompt: var(--pertamina-red);
  --accent-skill: var(--pertamina-blue);
  --accent-prd: var(--pertamina-blue-deep);
  --accent-docs: var(--pertamina-green);
  --tag-prompt-bg: #fdeaea;
  --tag-prompt-fg: var(--epn-red-deep);
  --tag-skill-bg: #e6f2fb;
  --tag-skill-fg: var(--epn-blue-deep);
  --tag-prd-bg: #dceaf7;
  --tag-prd-fg: var(--epn-blue-deep);
  --tag-docs-bg: #e8f7ef;
  --tag-docs-fg: var(--epn-green-deep);

  /* —— Kode & dokumen di panel —— */
  --code-dark-bg: var(--epn-blue-deep);
  --code-dark-fg: #ffffff;
  --code-dark-border: var(--epn-blue);
  --code-md-bg: #f3f9fc;
  --panel-head-bg: #f7fbfd;

  /* —— Tipografi —— */
  --font-sans: "Open Sans", "Segoe UI", system-ui, sans-serif;
  --font-sans-alt: var(--font-sans);
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;

  /* —— Bayangan & radius —— */
  --shadow: 0 18px 40px rgba(16, 32, 51, 0.08);
  --radius-card-lg: 22px;
  --radius-card-md: 18px;
  --radius-pill: 999px;
  --radius-code: 12px;

  /* —— Layout slide (1920×1080) —— */
  --slide-pad-x: 80px;
  --slide-pad-top: 72px;
  --slide-foot-h: 92px;
  --slide-foot-bottom: 36px;
  --slide-foot-pad-top: 18px;
  /* Jarak vertikal konten ↔ footer (slide header kunci: line-art, bisnis, isi, template, sesi) */
  --slide-main-foot-gap: 32px;
  --slide-quote-main-gap: 16px;
  --slide-quote-foot-gap: 12px;
  --slide-quote-pad-y: 16px;
  --slide-quote-pad-x: 22px;
  --slide-body-pad-bottom: 6px;
  /* Referensi tinggi header ~2 baris sub; grid memakai baris auto, bukan tinggi tetap */
  --slide-header-h: 188px;
  --slide-header-body-gap: 10px;
  --hdr-gap-eyebrow: 10px;
  --hdr-gap-title: 12px;
  --stack-gap-free: 36px;
  --content-max-wide: 1680px;
  --content-max-cover-title: 920px;
  --content-max-sub: 1280px;
  --content-max-tutup: 980px;

  /* —— Skala font (px @ canvas 1920) —— */
  --text-cover-title: 54px;
  --text-slide-title: 52px;
  --text-slide-sub: 22px;
  --text-slide-history-note: 16px;
  --text-slide-quote: 22px;
  --text-eyebrow-light: 16px;
  --text-eyebrow-dark: 18px;
  --text-foot: 18px;
  --text-foot-copy: 15px;
  --text-card-title: 32px;
  --text-card-body: 22px;
  --text-card-kicker: 18px;
  --text-tangga-num: 28px;
  --text-tangga-title: 26px;
  --text-tangga-sub: 18px;
  --text-meta-pill: 18px;
  --text-rekap-label: 16px;
  --text-rekap-body: 26px;
  --text-tutup: 28px;
  --text-tutup-brand: 20px;
  --text-panel-title: 18px;
  --text-tag: 11px;
  --text-code: 12.5px;
  --text-code-sm: 12px;
  --text-doc-body: 13.5px;
  --text-doc-h4: 11px;
  --text-nav: 13px;

  /* —— Jarak (gap) —— */
  --gap-isi-cards: 22px;
  --gap-template-grid: 16px;
  --gap-tangga: 16px;
  --gap-depan-cols: 48px;
  --gap-meta: 12px;
  --gap-rekap: 18px;
}