/* tokens.css — Farm Monitor design tokens (prompt §2.1).
   Satu-satunya tempat warna/spacing/radius/shadow/motion didefinisikan.
   Semua komponen WAJIB memakai var(--*) — tanpa hardcode warna. */

:root {
  /* Surface (dark, berlapis) */
  --bg:            #0a0b0e;
  --bg-subtle:     #0e1014;
  --surface:       #13151a;
  --surface-2:     #181b21;   /* elevated / hover */
  --surface-3:     #1f232b;   /* input, chip */
  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.13);

  /* Text */
  --text:          #eceef2;
  --text-muted:    #9aa1ad;
  --text-faint:    #5f6673;

  /* Accent (satu, konsisten) */
  --accent:        #6d8cff;
  --accent-soft:   rgba(109,140,255,0.14);

  /* Semantik status */
  --ok:            #34d399;  --ok-soft:   rgba(52,211,153,0.14);
  --warn:          #fbbf24;  --warn-soft: rgba(251,191,36,0.14);
  --err:           #f87171;  --err-soft:  rgba(248,113,113,0.14);
  --idle:          #7b8494;  --idle-soft: rgba(123,132,148,0.14);
  --info:          #60a5fa;  --info-soft: rgba(96,165,250,0.14);

  /* Spacing (grid 4px) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px;

  /* Radius & shadow */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.35);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast:120ms; --t-base:200ms; --t-slow:320ms;

  /* Layout */
  --sidebar-w:264px; --sidebar-w-collapsed:68px; --topbar-h:56px;
  --content-max:1480px;

  /* Font */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Light theme: token yang sama, nilai terang. Kontras target WCAG AA. */
[data-theme="light"] {
  --bg:            #f4f5f7;
  --bg-subtle:     #eceef1;
  --surface:       #ffffff;
  --surface-2:     #f6f7f9;
  --surface-3:     #e9ebef;
  --border:        rgba(16,20,28,0.09);
  --border-strong: rgba(16,20,28,0.18);

  --text:          #16181d;
  --text-muted:    #5a6270;
  --text-faint:    #8a919e;

  --accent:        #3d5fe0;
  --accent-soft:   rgba(61,95,224,0.10);

  --ok:            #0e8a5f;  --ok-soft:   rgba(14,138,95,0.10);
  --warn:          #9a6700;  --warn-soft: rgba(154,103,0,0.10);
  --err:           #d33a3a;  --err-soft:  rgba(211,58,58,0.10);
  --idle:          #6b7280;  --idle-soft: rgba(107,114,128,0.12);
  --info:          #2563eb;  --info-soft: rgba(37,99,235,0.10);

  --shadow-1: 0 1px 2px rgba(16,20,28,.08);
  --shadow-2: 0 8px 24px rgba(16,20,28,.10);
}