/* tokens.css — satu sumber: warna semantik, permukaan, jarak, tipe, gerak, lapisan.
   Brand diganti JS dari Pengaturan (--brand, --brand-2). */
:root{
  color-scheme:light;
  --brand:#6d28d9; --brand-2:#4f46e5;
  --brand-grad:linear-gradient(135deg,var(--brand),var(--brand-2));
  --brand-soft:color-mix(in srgb,var(--brand-2) 12%,transparent);
  --brand-text:var(--brand-2);            /* teks/tautan berwarna brand (gelap: versi lebih terang) */
  --brand-tint:color-mix(in srgb,var(--brand-2) 38%,#ffffff); /* nada muda brand: segmen kedua grafik bertumpuk & batang porsi */
  --glow:70%; --glow-soft:60%; --glow-hover:78%; /* kekuatan pendar warna: tombol utama, menu aktif, logo, kartu angka (gelap: 0 = tanpa glow) */
  --on-brand:#ffffff; --on-brand-soft:rgba(255,255,255,.18); --on-brand-line:rgba(255,255,255,.35);
  --on-brand-muted:rgba(255,255,255,.88); --on-brand-glow:rgba(255,255,255,.24); --card-sheen:rgba(255,255,255,.28);
  /* Kartu angka Beranda — sama dengan mockup (ops-hub/mockups/dashboard.html): gradasi 140° dari -0 (tingkat 500) ke -1 (700),
     tepi putih tipis, kilau. Teks putih ≥ 4,5:1 di warna dasar -1; ujung terang dekoratif (pilihan user 2026-09-13: "samain dulu"). */
  --st-rev-0:#3b82f6;    --st-rev-1:#1d4ed8;
  --st-ar-0:#f59e0b;     --st-ar-1:#b45309;
  --st-due-0:#ef4444;    --st-due-1:#b91c1c;
  --st-profit-0:#22c55e; --st-profit-1:#15803d;
  --st-cash-0:#14b8a6;   --st-cash-1:#0f766e;
  --st-exp-0:#fb7185;    --st-exp-1:#be123c;
  --st-line:rgba(255,255,255,.25);
  --logo-bg:#ffffff;

  --ink:#0f172a; --text-2:#475569; --text-3:#58677d; --faint:#94a3b8; /* text-3 ≥ 4,5:1 di latar halaman (juga sudut berwarna) */
  --line:rgba(148,163,184,.22); --line-strong:#e2e8f0;
  --label:#334155; --input-bg:#ffffff; --switch-off:#cbd5e1; --knob:#ffffff; --knob-shadow:rgba(15,23,42,.3);
  --hover:rgba(255,255,255,.6); --hover-ink:rgba(15,23,42,.06); --selected-bg:rgba(255,255,255,.92); --card-mobile:rgba(255,255,255,.75);
  --swatch-inset:rgba(255,255,255,.45); --swatch-ring:rgba(15,23,42,.1);
  --toast-bg:#0f172a; --toast-action:#c7d2fe; --toast-muted:rgba(255,255,255,.75); --toast-hover:rgba(255,255,255,.12);
  --backdrop:rgba(15,23,42,.5);
  --ok:#16a34a; --bad:#dc2626; --danger-line:rgba(185,28,28,.35); --danger-glow:rgba(185,28,28,.7); --due-ring:rgba(185,28,28,.12);
  --spin-track:rgba(255,255,255,.5); --flash-default:rgba(22,163,74,.18);
  --login-glow:rgba(34,211,238,.4); --login-form-bg:rgba(255,255,255,.55);
  --rev-0:#3b82f6; --cash-0:#14b8a6; --exp-0:#fb7185;   /* ujung terang gradasi batang grafik */

  /* Satu arti satu warna (teks, batang grafik, badge). Kartu angka Beranda punya set cerah sendiri: --st-* di atas. */
  --rev-1:#1d4ed8;     /* pendapatan */
  --cash-1:#0f766e;    /* uang masuk */
  --profit-1:#15803d;  /* laba */
  --ar-1:#b45309;      /* piutang */
  --exp-1:#be123c;     /* pengeluaran */
  --due-1:#b91c1c;     /* overdue */
  /* Versi teks warna semantik (angka berwarna, pesan error, tanggal telat). Gelap: lebih terang supaya terbaca. */
  --rev-text:var(--rev-1); --cash-text:var(--cash-1); --profit-text:var(--profit-1);
  --ar-text:var(--ar-1); --exp-text:var(--exp-1); --due-text:var(--due-1);

  --b-draft-bg:rgba(100,116,139,.14);  --b-draft-fg:#475569;
  --b-sent-bg:rgba(37,99,235,.12);     --b-sent-fg:#1d4ed8;
  --b-partial-bg:rgba(217,119,6,.16);  --b-partial-fg:#92400e;
  --b-paid-bg:rgba(22,163,74,.14);     --b-paid-fg:#166534;
  --b-overdue-bg:rgba(220,38,38,.13);  --b-overdue-fg:#b91c1c;
  --b-void-bg:rgba(100,116,139,.12);   --b-void-fg:#64748b;
  --b-info-bg:rgba(99,102,241,.13);    --b-info-fg:#4338ca;

  --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.86); --hair:rgba(255,255,255,.75);
  --page-bg:#eef1f7; --surface:#ffffff; --surface-2:#f7f8fb;
  --app-bg:
    radial-gradient(40% 50% at 12% 12%, rgba(124,58,237,.16), transparent 70%),
    radial-gradient(42% 50% at 88% 8%, rgba(37,99,235,.13), transparent 70%),
    radial-gradient(46% 56% at 82% 92%, rgba(20,184,166,.12), transparent 72%),
    linear-gradient(180deg,#f7f8fc,#eef1f7);

  --r-sm:10px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --sh-1:0 8px 24px -14px rgba(30,41,59,.28);
  --sh-2:0 16px 34px -16px rgba(30,41,59,.34);
  --sh-3:0 40px 90px -30px rgba(15,23,42,.55);

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:28px; --s-8:32px;
  --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px;

  --dur-fast:150ms; --dur-base:220ms; --dur-slow:280ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1);

  --z-sticky:10; --z-bottom:20; --z-backdrop:40; --z-modal:50; --z-toast:60;

  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --sb-w:244px; --bn-h:64px;
}

/* Mode gelap ala Stockbit — hanya di layar; saat cetak otomatis memakai token terang di atas. */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --page-bg:#0e0f11; --app-bg:linear-gradient(180deg,#0e0f11,#0b0c0e);
    --surface:#17181b; --surface-2:#1d1f23; --input-bg:#1d1f23;
    --glass:rgba(23,24,27,.94); --glass-strong:rgba(23,24,27,.97); --hair:rgba(255,255,255,.06);
    --line:rgba(255,255,255,.08); --line-strong:#2a2c31;
    --ink:#e9eaec; --text-2:#b4b8bf; --text-3:#9ba0a8; --faint:#6b7079; --label:#c9cdd3;
    --brand-text:color-mix(in srgb,var(--brand-2) 45%,#ffffff);
    --brand-soft:color-mix(in srgb,var(--brand-2) 24%,transparent);
    --glow:0%; --glow-soft:0%; --glow-hover:0%; --danger-glow:transparent; /* tanpa pendar warna di latar gelap */    --switch-off:#3a3d44; --knob-shadow:rgba(0,0,0,.5);
    --hover:rgba(255,255,255,.04); --hover-ink:rgba(255,255,255,.08); --selected-bg:#1d1f23; --card-mobile:#1a1b1f;
    --swatch-ring:rgba(255,255,255,.14); --toast-bg:#26282d; --backdrop:rgba(0,0,0,.6); --login-form-bg:rgba(23,24,27,.92);
    --sh-1:0 8px 24px -14px rgba(0,0,0,.7); --sh-2:0 16px 34px -16px rgba(0,0,0,.75); --sh-3:0 40px 90px -30px rgba(0,0,0,.85);
    --b-draft-bg:rgba(148,163,184,.16);  --b-draft-fg:#aab1bc;
    --b-sent-bg:rgba(59,130,246,.18);    --b-sent-fg:#8ab4ff;
    --b-partial-bg:rgba(245,158,11,.16); --b-partial-fg:#fbbf24;
    --b-paid-bg:rgba(34,197,94,.16);     --b-paid-fg:#4ade80;
    --b-overdue-bg:rgba(239,68,68,.16);  --b-overdue-fg:#f87171;
    --b-void-bg:rgba(148,163,184,.12);   --b-void-fg:#9ba0a8;
    --b-info-bg:rgba(129,140,248,.18);   --b-info-fg:#a5b4fc;
    --rev-text:#7aa7ff; --cash-text:#2dd4bf; --profit-text:#4ade80; --ar-text:#fbbf24; --exp-text:#fb7185; --due-text:#f87171;
  }
}