/* ============================================================
   Laraneya Home Wellness — Design Tokens
   Brand: sage/olive green + cream + warm brown. Kontras & rapi
   buat light & dark. Ganti --accent buat rebrand.
   ============================================================ */
:root{
  /* ---- Brand accent (sage green) ---- */
  --accent:#5E6A4A;
  --accent-2:#454F2F;
  --accent-3:#7C8765;
  --accent-soft:rgba(94,106,74,0.10);
  --accent-soft-2:rgba(94,106,74,0.18);
  --accent-grad:linear-gradient(135deg,#7C8765,#5E6A4A,#454F2F);
  --on-accent:#ffffff;
  --accent-text:var(--accent); /* warna teks ber-aksen — ikut accent di terang, putih di gelap */

  /* ---- Status (kontras, semantik jelas) ---- */
  --pos:#5E7D3A;          /* hijau positif */
  --neg:#C0492F;          /* terracotta negatif */
  --warn:#B0822A;         /* gold */
  --info:#4A7A8B;         /* teal */

  /* ---- Light theme (cream) ---- */
  --bg:#F3EFE4;
  --surface:#FFFFFF;
  --surface-2:#FBF9F3;
  --surface-3:#EEE9DC;
  --border:#E2DBCB;
  --border-2:rgba(94,106,74,0.14);
  --text:#1F2117;
  --text-2:#544F40;
  --muted:#8A8270;
  --shadow:0 2px 22px rgba(46,48,36,0.10);
  --shadow-2:0 1px 4px rgba(46,48,36,0.07);

  /* ---- Scale ---- */
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:18px;
  --gap:16px;
  --pad:18px;

  /* ---- Layout ---- */
  --sidebar-w:248px;
  --sidebar-rail:66px;
  --topbar-h:60px;

  --font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* ---- Dark theme (deep olive) ---- */
[data-theme="dark"]{
  --accent:#9CAA80;
  --accent-2:#8B9A6F;
  --accent-3:#B7C29B;
  --accent-soft:rgba(156,170,128,0.15);
  --accent-soft-2:rgba(156,170,128,0.24);
  --accent-grad:linear-gradient(135deg,#9CAA80,#7C8765,#B7C29B);
  --on-accent:#15180e;
  --accent-text:#FFFFFF; /* di gelap, teks ber-aksen jadi putih biar kebaca walau accent custom */

  --pos:#8FB36A;
  --neg:#E58A70;
  --warn:#D2B879;
  --info:#8FB3BF;

  --bg:#0E1007;
  --surface:#1F251A;
  --surface-2:#272E20;
  --surface-3:#303627;
  --border:#3C4331;
  --border-2:rgba(180,190,150,0.18);
  --text:#FFFFFF;
  --text-2:#FFFFFF;
  --muted:#EAE7DF;
  --shadow:0 4px 24px rgba(0,0,0,0.55);
  --shadow-2:0 2px 8px rgba(0,0,0,0.4);
}