/* ==========================================================================
   WMS Voucher Design System — tokens.css   (SATU-SATUNYA sumber token)
   DFEY.NET · PT. Ryzen Network Indonesia

   Jangan edit salinan di aplikasi. Edit file ini di design-system/, lalu jalankan
       python3 design-system/sync.py
   untuk menyalinnya ke: loginpage/hotspot/css, admin/assets/css, dashboard/css,
   landingpage/assets/css.

   Muat SEBELUM CSS aplikasi:  <link rel="stylesheet" href="css/tokens.css">
   Tema: :root[data-theme="dark"|"light"] (dipasang theme.js) — tanpa atribut,
   mengikuti prefers-color-scheme perangkat.
   ========================================================================== */

/* ---------- Font: Inter, berkas lokal (tanpa internet; aman untuk router) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-800.woff") format("woff"); }

:root {
  color-scheme: light;

  /* ---- Merek (merah Telkom untuk UI; BUKAN warna logo Telkom — lihat PANDUAN-LOGO-TELKOM.md) ---- */
  --red-1: #F0362A;            /* gradien panel: terang  */
  --red-2: #C8121B;            /* gradien panel: tengah  */
  --red-3: #8E0A12;            /* gradien panel: gelap   */
  --orange: #FF6A3D;           /* aksen blob             */
  --wine: #9E1B32;             /* aksen blob             */
  --panel-red: linear-gradient(150deg, #DC2A1F 0%, #BC111A 55%, #7E0A12 100%); /* panel merah; teks putih ≥ 4,5:1 */
  --accent: #D7141C;           /* tombol utama, tautan aktif */
  --accent-hover: #C3111A;
  --accent-ink: #B3121A;       /* teks merah di latar terang (AA) */
  --accent-soft: rgba(215, 20, 28, .08);
  --focus: #E42313;             /* tepi input saat fokus */
  --focus-ring: rgba(228, 35, 19, .35);
  --field-ring: 0 0 0 3px rgba(228, 35, 19, .14);

  /* ---- Netral ---- */
  --ink: #101828;              /* teks utama   */
  --ink-2: #1D2939;            /* label, judul kecil */
  --muted: #475467;            /* teks sekunder */
  --muted-2: #5A6272;          /* teks tersier, caption (AA ≥4.5:1 di kaca) */
  --icon: #667085;
  --line: rgba(16, 24, 40, .08);
  --line-2: rgba(16, 24, 40, .14);
  --bg: #F3F4F6;
  --bg-alt: #ECEEF2;
  --surface: #FFFFFF;
  --hover: rgba(16, 24, 40, .04);
  --field: rgba(255, 255, 255, .8);
  --dot: rgba(16, 24, 40, .07);  /* pola titik latar */

  /* ---- Kaca (glass) ---- */
  --glass: rgba(255, 255, 255, .74);
  --glass-strong: rgba(255, 255, 255, .9);
  --glass-line: rgba(255, 255, 255, .95);
  --glass-hi: rgba(255, 255, 255, 1);
  --blur: blur(20px) saturate(160%);

  /* ---- Bayangan ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
  --shadow-lg: 0 2px 4px rgba(16, 24, 40, .04), 0 30px 70px rgba(110, 16, 20, .14);
  --shadow-primary: 0 1px 2px rgba(16, 24, 40, .1), 0 6px 18px rgba(200, 18, 27, .22);
  --glass-shadow: var(--shadow);

  /* ---- Blob latar ---- */
  --blob-1: rgba(228, 35, 19, .16);
  --blob-2: rgba(255, 106, 61, .12);
  --blob-3: rgba(158, 27, 50, .08);

  /* ---- Status ---- */
  --ok-bg: #E3F5EA;   --ok-ink: #11663A;   --ok-line: #A6DDBC;   --ok-dot: #22A060;
  --warn-bg: #FFF4D6; --warn-ink: #7A4A00; --warn-line: #F2C14E;
  --bad-bg: #FDE7E7;  --bad-ink: #A30E16;  --bad-line: #F3A4A4;
  --info-bg: #E6EFFB; --info-ink: #184F95; --info-line: #A9CAF2;

  /* ---- Data / grafik ---- */
  --series-1: #D7141C; --series-2: #2A78D6; --series-3: #EDA100;
  /* Kualitas latency (diagram jaringan): sangat baik · baik · lambat · buruk — dicek CVD, selalu disertai angka ms */
  --lat-1: #2F9E5B; --lat-2: #1E88C8; --lat-3: #D08700; --lat-4: #B3261E;
  --grid: rgba(16, 24, 40, .07);
  --map-bg: #EEF0F4;
  --surface-line: rgba(255, 255, 255, .95);

  /* ---- Tipografi ---- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-caption: 12px;
  --fs-eyebrow: 12px;          /* huruf besar, tebal 700 */
  --ls-eyebrow: .08em;
  --fs-label: 13px;            /* label form, tebal 600 */
  --fs-body-app: 14px;         /* aplikasi (admin, dashboard) */
  --fs-body: 16px;             /* halaman publik (login hotspot, landing) */
  --fs-h1-auth: 26px;          /* judul kartu masuk */

  /* ---- Radius ---- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-control: 10px;           /* input, select, tombol kecil, item menu */
  --r-md: 12px;
  --r-lg: 16px;                /* kartu */
  --r-xl: 20px;                /* panel besar, hero mockup */
  --r-2xl: 24px;               /* kartu masuk / kartu utama */
  --r-pill: 999px;             /* tombol utama, lencana, chip */

  /* ---- Ukuran kontrol ---- */
  --h-control-sm: 38px;        /* tombol & input di aplikasi */
  --h-control: 46px;           /* tombol CTA landing */
  --h-control-lg: 50px;        /* input & tombol di kartu masuk */
  --touch: 44px;               /* target sentuh minimum */

  /* ---- Gerak & tata letak ---- */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --side-w: 248px; --rail-w: 76px; --top-h: 64px; --bnav-h: 64px;

  /* ---- Alias nama lama (kompatibilitas; jangan dipakai di kode baru) ---- */
  --red: var(--accent);
  --red-hover: var(--accent-hover);
  --red-ink: var(--accent-ink);
  --fg: var(--ink);
  --fg-2: var(--muted);
  --fg-3: var(--muted-2);
  --tint: var(--accent-soft);
  --ok: var(--ok-ink);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-2xl);
  --blob: .16;
}

/* ---------- Tema gelap ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --panel-red: linear-gradient(150deg, #C8241B 0%, #A00E16 55%, #5E070C 100%);
  --accent: #D42A31; --accent-hover: #C0242B; --accent-ink: #FF8086; --accent-soft: rgba(232, 50, 58, .14);
  --focus: #FF5A4E; --focus-ring: rgba(255, 90, 78, .4); --field-ring: 0 0 0 3px rgba(255, 90, 78, .18);
  --ink: #F2F4F7; --ink-2: #E4E7EC; --muted: #B0B6C1; --muted-2: #8A919E; --icon: #9AA0AA;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
  --bg: #0E0F12; --bg-alt: #15171C; --surface: #1A1C22;
  --hover: rgba(255, 255, 255, .05); --field: rgba(255, 255, 255, .05); --dot: rgba(255, 255, 255, .05);
  --glass: rgba(26, 27, 32, .74); --glass-strong: rgba(32, 33, 39, .94); --glass-line: rgba(255, 255, 255, .08); --glass-hi: rgba(255, 255, 255, .06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, .45);
  --shadow-primary: 0 12px 28px rgba(0, 0, 0, .45);
  --blob-1: rgba(228, 35, 19, .16); --blob-2: rgba(255, 106, 61, .06); --blob-3: rgba(158, 27, 50, .12);
  --ok-bg: rgba(46, 160, 90, .15);   --ok-ink: #7CDDA2;  --ok-line: rgba(124, 221, 162, .3); --ok-dot: #34C76E;
  --warn-bg: rgba(242, 193, 78, .13); --warn-ink: #F2C14E; --warn-line: rgba(242, 193, 78, .3);
  --bad-bg: rgba(240, 90, 90, .14);  --bad-ink: #FF9A9A; --bad-line: rgba(255, 154, 154, .3);
  --info-bg: rgba(57, 135, 229, .15); --info-ink: #9EC5F4; --info-line: rgba(158, 197, 244, .3);
  --series-1: #E34948; --series-2: #3987E5; --series-3: #C98500; --grid: rgba(255, 255, 255, .07);
  --lat-1: #2E9F5F; --lat-2: #3A8BD0; --lat-3: #BF8410; --lat-4: #E04F5A;
  --map-bg: #17181C; --surface-line: rgba(14, 15, 18, .95);
  --blob: .13;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --panel-red: linear-gradient(150deg, #C8241B 0%, #A00E16 55%, #5E070C 100%);
    --accent: #D42A31; --accent-hover: #C0242B; --accent-ink: #FF8086; --accent-soft: rgba(232, 50, 58, .14);
    --focus: #FF5A4E; --focus-ring: rgba(255, 90, 78, .4); --field-ring: 0 0 0 3px rgba(255, 90, 78, .18);
    --ink: #F2F4F7; --ink-2: #E4E7EC; --muted: #B0B6C1; --muted-2: #8A919E; --icon: #9AA0AA;
    --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
    --bg: #0E0F12; --bg-alt: #15171C; --surface: #1A1C22;
    --hover: rgba(255, 255, 255, .05); --field: rgba(255, 255, 255, .05); --dot: rgba(255, 255, 255, .05);
    --glass: rgba(26, 27, 32, .74); --glass-strong: rgba(32, 33, 39, .94); --glass-line: rgba(255, 255, 255, .08); --glass-hi: rgba(255, 255, 255, .06);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .45);
    --shadow-primary: 0 12px 28px rgba(0, 0, 0, .45);
    --blob-1: rgba(228, 35, 19, .16); --blob-2: rgba(255, 106, 61, .06); --blob-3: rgba(158, 27, 50, .12);
    --ok-bg: rgba(46, 160, 90, .15);   --ok-ink: #7CDDA2;  --ok-line: rgba(124, 221, 162, .3); --ok-dot: #34C76E;
    --warn-bg: rgba(242, 193, 78, .13); --warn-ink: #F2C14E; --warn-line: rgba(242, 193, 78, .3);
    --bad-bg: rgba(240, 90, 90, .14);  --bad-ink: #FF9A9A; --bad-line: rgba(255, 154, 154, .3);
    --info-bg: rgba(57, 135, 229, .15); --info-ink: #9EC5F4; --info-line: rgba(158, 197, 244, .3);
    --series-1: #E34948; --series-2: #3987E5; --series-3: #C98500; --grid: rgba(255, 255, 255, .07);
    --lat-1: #2E9F5F; --lat-2: #3A8BD0; --lat-3: #BF8410; --lat-4: #E04F5A;
    --map-bg: #17181C; --surface-line: rgba(14, 15, 18, .95);
    --blob: .13;
  }
}

/* ---------- Dasar bersama ---------- */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
button, input, select, textarea { font-family: inherit; }

/* ---------- Logo Telkom Indonesia ----------
   Logo putih dipakai langsung di atas latar gelap tanpa pelat putih. */
.tlk-logo { display: block; height: 32px; width: auto; }
.tlk-icon { display: block; height: 26px; width: auto; }
.tlk-on-dark { display: none !important; }