/* ==========================================================================
   KAPROD WORKSPACE — DESIGN TOKENS (satu-satunya sumber token)
   Default = dark. Tema terang lewat :root[data-theme="light"].
   Jangan definisikan ulang token di file CSS lain.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Permukaan */
  --bg:         #0a0f1b;
  --surface:    #111827;
  --surface-2:  #161f31;
  --surface-3:  #1e2a40;
  --line:       #212c42;
  --line-strong:#2d3a55;

  /* Teks */
  --ink:   #eef2fa;
  --ink-2: #a3aec4;
  --ink-3: #6b7791;

  /* Brand (Amber) */
  --brand:      #f8b733;
  --brand-ink:  #fcd373;
  --brand-soft: rgb(248 183 51 / .15);
  --brand-line: rgb(245 158 11 / .28);
  --on-brand:   #0d1424;

  /* Sidebar */
  --side:      #070b14;
  --side-ink:  #e2e8f0;
  --side-line: #18233a;

  /* Status */
  --ok:       #34d399;
  --ok-soft:  rgb(52 211 153 / .14);
  --err:      #f87171;
  --err-soft: rgb(248 113 113 / .14);
  --info:     #60a5fa;

  /* Hierarki organisasi */
  --tier-top:    #f8b733;
  --tier-middle: #3b82f6;
  --tier-lower:  #8b5cf6;
  --tier-staff:  #10b981;

  /* Elevasi */
  --shadow:     0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6);
  --shadow-pop: 0 24px 60px -12px rgb(0 0 0 / .75);
  --scrim:      rgb(4 7 13 / .72);
  --code-bg:    #0b1220;

  /* Ukuran */
  --sidebar-w: 264px;
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --gap: 20px;
  --pad-x: 28px;
  --pad-y: 24px;

  /* Safe area (notch / home bar) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --app-h: 100vh;

  /* Font */
  --font:    "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Motion */
  --ease:   cubic-bezier(.22, 1, .36, 1);
  --t-fast: .15s;
  --t-med:  .3s;

  /* Ikon pencarian (dipakai di input sidebar) */
  --icon-search: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg:         #f5f7fb;
  --surface:    #ffffff;
  --surface-2:  #eff3f9;
  --surface-3:  #e4eaf3;
  --line:       #e1e7f0;
  --line-strong:#c8d2e1;

  --ink:   #0f172a;
  --ink-2: #4a5873;
  --ink-3: #8794ab;

  --brand:      #f59e0b;
  --brand-ink:  #b45309;
  --brand-soft: rgb(245 158 11 / .14);
  --brand-line: rgb(217 119 6 / .32);

  --side:      #ffffff;
  --side-ink:  #0f172a;
  --side-line: #e1e7f0;

  --ok:       #059669;
  --ok-soft:  rgb(5 150 105 / .1);
  --err:      #dc2626;
  --err-soft: rgb(220 38 38 / .08);
  --info:     #2f5bff;

  --shadow:     0 1px 2px rgb(15 23 42 / .06), 0 8px 24px -14px rgb(15 23 42 / .18);
  --shadow-pop: 0 24px 60px -16px rgb(15 23 42 / .35);
  --scrim:      rgb(15 23 42 / .5);
  --code-bg:    #0f172a;
}

@supports (height: 100dvh) {
  :root { --app-h: 100dvh; }
}