/* ─────────────────────────────────────────────────────────────
   ainoia shared theme — dark (default) + light
   Dipakai semua halaman: index, dashboard, login, register.
   Toggle menulis data-theme="light" di <html>; pilihan disimpan
   di localStorage dan dipasang sebelum paint (anti-flash).
   ───────────────────────────────────────────────────────────── */

:root{
  --void:#08080a;
  --panel:#101014;
  --panel-2:#16161b;
  --panel-3:#1c1c22;
  --line:#232329;
  --line-2:#32323a;
  --ink:#f2f2f4;
  --ink-2:#a8a8b3;
  --ink-3:#8b8b93;
  --amber:#f5b544;
  --amber-dim:rgba(245,181,68,.12);
  --amber-hover:#ffc65c;
  --on-amber:#151004;
  --cyan:#22d3ee;
  --cyan-dim:rgba(34,211,238,.1);
  --red:#fb7185;
  --green:#4ade80;
  --pill-free-bg:rgba(74,222,128,.16);
  --pill-free-ink:#86efac;
  --pill-paid-bg:rgba(74,222,128,.14);
  --pill-paid-ink:#86efac;
  --pill-off-bg:rgba(251,113,133,.14);
  --pill-off-ink:#ffbcc6;
  --msg-err-bg:rgba(251,113,133,.1);
  --msg-err-line:rgba(251,113,133,.28);
  --msg-err-ink:#ffbcc6;
  --msg-ok-bg:rgba(74,222,128,.08);
  --msg-ok-line:rgba(74,222,128,.26);
  --msg-ok-ink:#a7f3c0;
  --msg-info-bg:rgba(34,211,238,.08);
  --msg-info-line:rgba(34,211,238,.24);
  --msg-info-ink:#a5eef8;
  --warn-bg:rgba(245,181,68,.08);
  --warn-line:rgba(245,181,68,.3);
  --warn-ink:#ffe0a3;
  --nav-bg:rgba(8,8,10,.86);
  --code-bg:#0c0c10;
  --shadow:0 24px 60px -30px rgba(0,0,0,.9);
  --placeholder:#5c5c66;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --display:'Bricolage Grotesque',var(--sans);
  --r:10px;
  --r-sm:6px;

  color-scheme: dark;
}

/* ── LIGHT ── */
html[data-theme="light"]{
  --void:#f7f5ef;
  --panel:#ffffff;
  --panel-2:#f3f0e8;
  --panel-3:#eae6dc;
  --line:#e3ded1;
  --line-2:#cfc8b8;
  --ink:#16150f;
  --ink-2:#57534a;
  --ink-3:#6f6a5e;
  --amber:#8a5d05;
  --amber-dim:rgba(138,93,5,.12);
  --amber-hover:#6f4a03;
  --on-amber:#ffffff;
  --cyan:#0e7c8c;
  --cyan-dim:rgba(14,124,140,.1);
  --red:#c0344e;
  --green:#1a7f45;
  --pill-free-bg:rgba(26,127,69,.12);
  --pill-free-ink:#145f35;
  --pill-paid-bg:rgba(26,127,69,.1);
  --pill-paid-ink:#145f35;
  --pill-off-bg:rgba(192,52,78,.1);
  --pill-off-ink:#96243c;
  --msg-err-bg:rgba(192,52,78,.07);
  --msg-err-line:rgba(192,52,78,.28);
  --msg-err-ink:#96243c;
  --msg-ok-bg:rgba(26,127,69,.08);
  --msg-ok-line:rgba(26,127,69,.28);
  --msg-ok-ink:#145f35;
  --msg-info-bg:rgba(14,124,140,.07);
  --msg-info-line:rgba(14,124,140,.26);
  --msg-info-ink:#0a5561;
  --warn-bg:rgba(181,125,16,.09);
  --warn-line:rgba(181,125,16,.32);
  --warn-ink:#7a5410;
  --nav-bg:rgba(247,245,239,.88);
  --code-bg:#f3f0e8;
  --shadow:0 20px 50px -32px rgba(60,50,20,.35);
  --placeholder:#9a9384;

  color-scheme: light;
}

/* ── toggle di nav ── */
.themetog{
  display:inline-flex;align-items:center;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--panel);flex:none;overflow:hidden;
  min-height:44px;
}
.themetog button{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;min-height:44px;padding:0;border:0;background:transparent;
  color:var(--ink-3);cursor:pointer;font-family:var(--mono);font-size:.8125rem;
  transition:background .15s,color .15s;
}
.themetog button:hover{color:var(--ink);background:var(--panel-2)}
.themetog button[aria-pressed="true"]{
  background:var(--amber-dim);color:var(--amber);
}
.themetog button:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.themetog svg{width:15px;height:15px;display:block}

/* ── penyesuaian kecil khusus light ── */
html[data-theme="light"] body::before{opacity:.5}
html[data-theme="light"] .btn.solid,
html[data-theme="light"] .cta-band .btn-primary{color:var(--on-amber)}
html[data-theme="light"] .card,
html[data-theme="light"] .panel{box-shadow:0 1px 2px rgba(60,50,20,.06)}
html[data-theme="light"] .sk{
  background:linear-gradient(90deg,var(--panel-2) 25%,var(--panel-3) 50%,var(--panel-2) 75%);
  background-size:200% 100%;
}

@media(prefers-reduced-motion:reduce){
  .themetog button{transition:none}
}