/* =============================================================================
   Apnesia Partner Planner — tokens.css
   Satu-satunya sumber nilai desain. Semua komponen mengambil dari token ini,
   tidak pernah dari hex mentah.

   Struktur file:
     0. @font-face       → Montserrat self-host (variable 100–900)
     1. :root            → SELURUH token (light = default), wajib lengkap di sini
     2. Mode gelap DIMATIKAN (13 Okt): aplikasi selalu berlatar putih, apa pun pengaturan perangkat.
     4. prefers-reduced-motion      → hanya token durasi
   Palet grafik (--series-*, --seq-*, --funnel-*) dipegang tim diagram; nilai
   di sini adalah dasar yang boleh ditimpa oleh token --viz-* di grafik.css.
   ========================================================================== */

/* --- 0. MONTSERRAT (self-host, pola fontsource) ----------------------------- */
/* latin-ext */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* --- 1. MEREK ----------------------------------------------------------- */
  /* Navy Apnesia #0B2947 — warna utama merek (logo, tombol utama, tab Hari ini). */
  --brand-ink:        #0B2947;  /* 14.8:1 di atas putih */
  --brand-blue:       #0B2947;  /* nama lama dipertahankan: tombol utama = navy */
  --brand-blue-hover: #16406B;
  --brand-blue-press: #061B30;
  --brand-orange:     #FF6B35;
  --on-brand:         #FFFFFF;
  --brand-wash:       #EEF2F8;
  --brand-charcoal:   #333333;
  /* Gradasi merek — hanya untuk layar masuk & ikon Hari ini, tidak di data. */
  --brand-gradient:   linear-gradient(120deg, #2F6FED 0%, #8B5CF6 38%, #EC4899 68%, #FF6B35 100%);

  /* --- 2. BIDANG & GARIS (dasar putih) ------------------------------------ */
  --plane:            #FFFFFF;  /* latar halaman */
  --surface:          #FFFFFF;  /* latar kartu, modal, baris tabel */
  --surface-2:        #F6F8FB;  /* kepala tabel, track, input nonaktif */
  --surface-3:        #FAFBFD;  /* kolom hari pada papan mingguan */
  --line:             #E3E8EF;  /* hairline standar kartu, input, tabel */
  --line-soft:        #EEF1F6;  /* pemisah di dalam kartu, grid halus */
  --line-strong:      #C9D2DE;  /* batas input saat hover, baseline grafik */

  /* --- 3. TINTA TEKS ------------------------------------------------------ */
  --ink:              #0E1A2B;  /* 17.5:1 — judul, angka, isi tabel (navy gelap) */
  --ink-2:            #3D4A5C;  /*  9.1:1 — teks pendukung, label form */
  --muted:            #5E6B7E;  /*  5.4:1 putih · 5.1:1 surface-2 — keterangan */
  --ink-invert:       #FFFFFF;

  /* --- 4. WARNA MODUL ----------------------------------------------------- */
  /* Tiap modul punya empat nada:
       --mod-X        nada hidup — isian dekoratif (garis aksen, bar, titik).
                      BUKAN untuk teks kecil.
       --mod-X-ink    teks & ikon di atas putih/wash (AA ≥ 4.5:1).
       --mod-X-strong bidang terisi (tombol, tab aktif, chip aktif).
       --mod-X-wash   latar lembut (ikon modul, hover, chip).
     Kontras: lihat docs/design-system.md. */
  --mod-infografis:        #2F6FED;  /* biru   */
  --mod-infografis-ink:    #1F55C9;  /* 6.6 putih · 5.8 wash */
  --mod-infografis-strong: #1A73E8;  /* putih di atasnya 4.5:1 */
  --mod-prospek:           #FF6B35;  /* jingga */
  --mod-prospek-ink:       #C2410C;  /* 5.2 putih · 4.7 wash */
  --mod-prospek-strong:    #CF4A10;  /* 4.5:1 */
  --mod-goal:              #12B886;  /* hijau  */
  --mod-goal-ink:          #08785A;  /* 5.5 putih · 5.0 wash */
  --mod-goal-strong:       #08855F;  /* 4.6:1 */
  --mod-mingguan:          #F5A524;  /* kuning amber */
  --mod-mingguan-ink:      #A15200;  /* 5.6 putih · 5.2 wash */
  --mod-mingguan-strong:   #F5A524;  /* tinta gelap di atasnya (8.2:1) */
  --mod-impor:             #8B5CF6;  /* ungu   */
  --mod-impor-ink:         #6A3FD8;  /* 6.3 putih · 5.6 wash */
  --mod-impor-strong:      #7A45F0;  /* 5.3:1 */
  --mod-setelan:           #EC4899;  /* pink   */
  --mod-setelan-ink:       #BE1F6E;  /* 5.8 putih · 5.1 wash */
  --mod-setelan-strong:    #D61F69;  /* 4.9:1 */
  --mod-hari:              #0B2947;  /* Hari ini = navy merek */
  --mod-hari-ink:          #0B2947;
  --mod-hari-strong:       #0B2947;
  --mod-hari-wash:         #EEF2F8;
  --mod-infografis-wash:   #EBF2FF;
  --mod-prospek-wash:      #FFF1EA;
  --mod-goal-wash:         #E6F8F1;
  --mod-mingguan-wash:     #FFF5DD;
  --mod-impor-wash:        #F3EEFF;
  --mod-setelan-wash:      #FDECF5;
  /* Tinta di atas bidang --mod-X-strong. */
  --on-mod-light:          #FFFFFF;  /* biru/jingga/hijau/ungu/pink/navy */
  --on-mod-amber:          #2B1A00;  /* untuk amber (8.2:1) */

  /* Chip kategori: 8 pasangan wash/ink, dipilih dari urutan daftar kategori. */
  --kat-1-wash: #EBF2FF; --kat-1-ink: #1F55C9;
  --kat-2-wash: #FFF1EA; --kat-2-ink: #C2410C;
  --kat-3-wash: #E6F8F1; --kat-3-ink: #08785A;
  --kat-4-wash: #F3EEFF; --kat-4-ink: #6A3FD8;
  --kat-5-wash: #FDECF5; --kat-5-ink: #BE1F6E;
  --kat-6-wash: #FFF5DD; --kat-6-ink: #A15200;
  --kat-7-wash: #E3F7FA; --kat-7-ink: #0E7490;  /* 4.8 */
  --kat-8-wash: #EEF7DC; --kat-8-ink: #4D7C0F;  /* 4.5 */

  /* --- 5. STATUS (makna terkunci, tidak ikut tema modul) ------------------ */
  /* Selalu tampil sebagai ikon + teks; warna tidak pernah berdiri sendiri. */
  --st-closing:       #16A34A;  /* sudah closing / Done */
  --st-closing-wash:  #E8F7EE;
  --st-closing-ink:   #12703A;  /* 5.6 di wash */
  --st-jalan:         #F5B000;  /* sedang jalan / Planned */
  --st-jalan-wash:    #FFF5D6;
  --st-jalan-ink:     #7A4E00;  /* 6.6 di wash */
  --st-belum:         #94A3B8;  /* Not Started (netral) */
  --st-belum-wash:    #F1F4F8;
  --st-belum-ink:     #475569;  /* 6.9 di wash */
  --st-lewat:         #E5484D;  /* tenggat terlewat */
  --st-lewat-wash:    #FDECEC;
  --st-lewat-ink:     #B42328;  /* 5.7 di wash */

  /* --- 6. URGENSI / PRIORITAS (ramp ordinal, satu rona) ------------------- */
  --urg-1:            #F5B6D2;  /* Optional */
  --urg-2:            #F07AB0;  /* Low */
  --urg-3:            #DB2777;  /* Medium */
  --urg-4:            #9D174D;  /* High */

  /* --- 7. PALET GRAFIK (dasar; tim diagram boleh menimpa lewat --viz-*) --- */
  --series-1:         #1256C4;
  --series-2:         #E05420;
  --series-3:         #0E8F6E;
  --series-4:         #6B4BD6;
  --series-5:         #C77800;
  --series-6:         #B8336A;

  --seq-100:          #DCE7FB;
  --seq-150:          #C6D8F8;
  --seq-200:          #A9C4F4;
  --seq-250:          #86ADEF;
  --seq-300:          #6796E9;
  --seq-350:          #4C80E0;
  --seq-400:          #2E68D4;
  --seq-450:          #1256C4;
  --seq-500:          #1049A6;
  --seq-550:          #0E3D8B;
  --seq-600:          #0C3272;
  --seq-650:          #0A2859;
  --seq-700:          #081F46;

  --funnel-1:         #86ADEF;
  --funnel-2:         #4C80E0;
  --funnel-3:         #1256C4;
  --funnel-4:         #0C3272;

  --chart-surface:    #FFFFFF;
  --chart-grid:       #EEF1F6;
  --chart-axis:       #C9D2DE;
  --chart-label:      #5E6B7E;
  --chart-track:      #F1F4F8;

  /* --- 8. SPASI (4px base) ----------------------------------------------- */
  --sp-0:   0;
  --sp-1:   2px;
  --sp-2:   4px;
  --sp-3:   6px;
  --sp-4:   8px;
  --sp-5:   12px;
  --sp-6:   16px;
  --sp-7:   20px;
  --sp-8:   24px;
  --sp-9:   32px;
  --sp-10:  40px;
  --sp-11:  48px;
  --sp-12:  64px;

  /* --- 9. RADIUS (lebih bulat, ramah) ------------------------------------ */
  --r-data:   4px;    /* ujung bar grafik */
  --r-ctl:    10px;   /* tombol, input, select */
  --r-chip:   8px;    /* tag kecil, sel kode */
  --r-card:   16px;   /* kartu, kolom hari */
  --r-sheet:  20px;   /* modal, bottom sheet */
  --r-pill:   999px;  /* pil status, chip filter, tab */

  /* --- 10. BAYANGAN (lembut, kebiruan) ----------------------------------- */
  --sh-none:  none;
  --sh-card:  0 1px 2px rgba(14,26,43,.04), 0 2px 8px -2px rgba(14,26,43,.06);
  --sh-raise: 0 1px 2px rgba(14,26,43,.06), 0 4px 12px -4px rgba(14,26,43,.12);
  --sh-hover: 0 2px 4px rgba(14,26,43,.04), 0 12px 28px -12px rgba(14,26,43,.22);
  --sh-float: 0 8px 20px -6px rgba(14,26,43,.14), 0 28px 56px -24px rgba(14,26,43,.38);
  --sh-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px rgba(47,111,237,.65);

  /* --- 11. TIPOGRAFI (Montserrat untuk semua teks) ------------------------ */
  --font-ui:   "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-data: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif; /* + tabular-nums */
  --fw-reg:    400;
  --fw-med:    500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;
  /* Skala — Montserrat lebar, jadi isi 14px & keterangan 12px sudah lega. */
  --fs-micro:  11px;  /* penanda kecil (eyebrow), angka badge */
  --fs-mini:   12px;  /* keterangan, kepala kolom, chip */
  --fs-sm:     13px;  /* sel tabel, isi checklist */
  --fs-base:   14px;  /* teks antarmuka default */
  --fs-md:     15px;  /* judul kartu goal, label tab */
  --fs-lg:     17px;  /* judul kartu */
  --fs-xl:     24px;  /* judul layar */
  --fs-2xl:    26px;
  --fs-3xl:    30px;  /* angka KPI */
  --fs-4xl:    40px;  /* judul layar masuk */
  --fs-5xl:    48px;
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-base:   1.55;
  --lh-loose:  1.7;
  --ls-wide:   .01em;   /* dulu label uppercase; kini hanya sedikit renggang */
  --ls-tight:  -.02em;  /* judul besar */
  --ls-mark:   -.03em;

  /* --- 12. UKURAN & TARGET ----------------------------------------------- */
  --tap-min:     44px;
  --tap-dense:   40px;
  --ctl-h:       38px;
  --ctl-h-touch: 44px;
  --shell-max:   1280px;
  --read-max:    65ch;
  --bar-h:       14px;
  --bar-gap:     2px;
  --donut-stroke: 18px;
  --focus-w:     2px;
  --focus-off:   2px;

  /* --- 13. GERAK (150–200 ms) -------------------------------------------- */
  --dur-0:    0ms;
  --dur-1:    150ms;  /* hover, warna */
  --dur-2:    170ms;  /* centang */
  --dur-3:    200ms;  /* geser pil tab, naiknya modal */
  --dur-4:    280ms;  /* bar progres */
  --dur-5:    360ms;  /* bar grafik tumbuh */
  --stagger:  24ms;
  --ease-out:  cubic-bezier(.2, .7, .3, 1);
  --ease-in:   cubic-bezier(.5, 0, .9, .4);
  --ease-move: cubic-bezier(.4, 0, .2, 1);
  --ease-pop:  cubic-bezier(.3, 1.6, .5, 1);  /* sedikit memantul: centang */

  /* --- 14. LAPIS (z-index) ----------------------------------------------- */
  --z-sticky:  10;
  --z-dropdown: 30;
  --z-modal:   40;
  --z-toast:   60;

  /* --- 15. TEKSTUR "GARIS KECEPATAN" ------------------------------------- */
  --speed-stripe: repeating-linear-gradient(45deg,
                    var(--line-soft) 0 1px, transparent 1px 7px);
  --speed-stripe-alt: repeating-linear-gradient(135deg,
                    var(--line-soft) 0 1px, transparent 1px 7px);
}

/* =============================================================================
   DARK — hanya token warna. Sederhana: permukaan navy gelap, modul memakai
   nada terang (ink) untuk teks dan nada hidup untuk bidang dengan tinta gelap.
   ========================================================================== */
/* (mode gelap dimatikan) */

/* Toggle tema eksplisit — nilai dark yang sama, supaya menang dua arah. */
/* (mode gelap dimatikan) */

/* =============================================================================
   GERAK DIKURANGI — token durasi dinolkan, jadi setiap transisi yang memakai
   token ini langsung berhenti. Tambahkan juga pemutus global untuk animasi
   bernama (bar tumbuh, stagger) yang tidak lewat token.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1:   0.01ms;
    --dur-2:   0.01ms;
    --dur-3:   0.01ms;
    --dur-4:   0.01ms;
    --dur-5:   0.01ms;
    --stagger: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}