/* =====================================================================
   Design Tokens — KONI Aceh Barat by Data
   Arah visual: institutional credibility + sports energy + modern editorial
   (MASTER PROMPT TECH STACK bagian 28–41)
   ===================================================================== */

@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlowcond-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('../fonts/barlowcond-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- warna inti (dari logo GITAMITECH, diuji kontras) ---- */
  --biru:        #2E568F;   /* aksen utama — navigasi, tautan, angka penting */
  --biru-tua:    #1E3A63;   /* hover, heading gelap */
  --biru-pekat:  #14243D;   /* latar gelap: topbar portal, sidebar CMS */
  --biru-pucat:  #E9EFF7;   /* latar sorotan tipis */
  --sian:        #1FA8C2;   /* aksen kedua — dipakai SANGAT hemat */

  /* ---- netral (bias dingin, bukan abu murni) ---- */
  --tinta:       #1A2330;   /* teks utama */
  --tubuh:       #4E5A6B;   /* teks isi */
  --samar:       #8B96A5;   /* label, keterangan */
  --garis:       #D9DFE7;   /* border & pembatas */
  --garis-tipis: #E8ECF1;
  --panel:       #F5F7FA;   /* latar panel data */
  --kertas:      #FDFDFB;   /* latar halaman portal (putih hangat tipis) */
  --putih:       #FFFFFF;

  /* ---- semantik — TIDAK BOLEH dibirukan ---- */
  --hijau:       #1F6B4A;  --hijau-bg:  #E6F1EB;
  --kuning:      #9A6B0F;  --kuning-bg: #FAF0D9;
  --merah:       #B3312A;  --merah-bg:  #FAE8E6;

  /* ---- tipografi ---- */
  --font-judul:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-isi:    'Archivo', 'Segoe UI', sans-serif;

  /* ---- skala ---- */
  --maks-portal: 1200px;
  --maks-cms:    1560px;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- sentuhan tailwind: radius, bayangan, transisi ---- */
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-penuh: 9999px;
  --bayang-xs: 0 1px 2px 0 rgba(16,24,40,.05);
  --bayang-sm: 0 1px 3px 0 rgba(16,24,40,.08), 0 1px 2px -1px rgba(16,24,40,.06);
  --bayang-md: 0 4px 6px -1px rgba(16,24,40,.07), 0 2px 4px -2px rgba(16,24,40,.05);
  --bayang-lg: 0 10px 15px -3px rgba(16,24,40,.08), 0 4px 6px -4px rgba(16,24,40,.05);
  --transisi: .15s cubic-bezier(.4,0,.2,1);
}

/* ---- reset ringkas ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-isi);
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
table { border-collapse: collapse; width: 100%; }

/* ---- utilitas tipografi ---- */
.t-judul   { font-family: var(--font-judul); font-weight: 700; line-height: 1.02; letter-spacing: .1px; }
.t-label   { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--samar); }
.t-angka   { font-family: var(--font-judul); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ---- status: pill lembut ala tailwind (warna + teks, tidak hanya warna) ---- */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-penuh); }
.st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.st-hijau  { color: var(--hijau);  background: var(--hijau-bg); }
.st-kuning { color: var(--kuning); background: var(--kuning-bg); }
.st-merah  { color: var(--merah);  background: var(--merah-bg); }

/* aksesibilitas */
:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}