/* ============================================================
   NoHalu UI — Design Tokens
   Diambil dari desain asli nohalu.xyz (nohalu-cloud apps/web
   globals.css), dipakai sebagai sistem desain utama UI ini.
   ============================================================ */

:root {
  /* Permukaan & teks (dark first — tema default produk) */
  --bg: #121413;
  --panel: #191b1a;
  --panel-2: #232624;
  --border: #2b302d;
  --border-strong: #454d48;
  --surface-hover: #1e2320;

  --text-1: #ededed;
  --text-2: #b0b6b2;
  --text-3: #9da59f;

  /* Art system (SVG dekoratif, dari nohalu.xyz) */
  --art-line: #46544c;
  --art-plane: #1d2521;
  --art-grid: #242e28;

  /* Brand */
  --brand: #3ecf8e;
  --brand-fg: #10251b;
  --action-bg: #006b45;
  --action-fg: #ffffff;
  --action-hover: #087c53;
  --action-border: #21865d;

  /* Semantik */
  --ok: #34d399;
  --fail: #f16a6a;
  --warn: #f0b429;
  --info: #6ea8fe;
  --accent: #3ecf8e;      /* alias brand utk kompatibilitas komponen */
  --accent-2: #a78bfa;

  /* Efek & bayangan */
  --glow-alpha: 20%;
  --glow-color: #ffffff;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  --motion-ease: cubic-bezier(.22, 1, .36, 1);

  /* Tipografi */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  /* Radius & jarak */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fafbfa;
    --panel: #ffffff;
    --panel-2: #edf1ee;
    --border: #dde3df;
    --border-strong: #b9c5be;
    --surface-hover: #f2f6f3;
    --text-1: #171c19;
    --text-2: #535e57;
    --text-3: #5e6b63;
    --art-line: #b3c6ba;
    --art-plane: #e9f0ec;
    --art-grid: #e2ebe5;
    --brand: #006b45;
    --brand-fg: #ffffff;
    --accent: #006b45;
    --action-bg: #006b45;
    --action-fg: #ffffff;
    --ok: #0d7a4a;
    --fail: #c13639;
    --warn: #8a5316;
    --info: #2563eb;
    --accent-2: #6d28d9;
    --glow-alpha: 9%;
    --glow-color: #b9c2cc;
    --shadow: 0 16px 40px rgba(20, 24, 20, 0.1);
  }
}

/* Dasar skema warna (dari nohalu.xyz globals.css) */
html {
  color-scheme: light dark;
}