/* Hermes Office design tokens -- satu sumber warna/tipografi/spasi/motion.
   Dipakai login.css dan app.css. Gaya: glass gelap di atas kanvas 3D,
   padat (dashboard), font sistem (CSP font-src 'self'). */
:root {
  color-scheme: dark;

  /* surface */
  --c-bg: #0b1120;
  --c-surface: rgba(15, 23, 42, 0.88);
  --c-surface-solid: #0f172a;
  --c-surface-2: #16203a;
  --c-surface-3: #1e293b;
  --c-inset: #080d19;
  --c-scrim: rgba(5, 9, 18, 0.62);
  --c-border: rgba(148, 163, 184, 0.18);
  --c-border-strong: rgba(148, 163, 184, 0.36);

  /* text (semua >= 4.5:1 di atas --c-surface-solid) */
  --c-text: #f1f5f9;
  --c-text-2: #cbd5e1;
  --c-muted: #94a3b8;

  /* aksi */
  --c-accent: #38bdf8;
  --c-accent-strong: #0ea5e9;
  --c-on-accent: #04202f;
  --c-accent-soft: rgba(56, 189, 248, 0.14);
  --c-focus: #7dd3fc;
  --c-danger: #f87171;
  --c-danger-soft: rgba(239, 68, 68, 0.12);
  --c-success: #4ade80;
  --c-success-soft: rgba(34, 197, 94, 0.12);

  /* status agent: warna isi + warna teks chip */
  --c-idle: #22c55e;
  --c-working: #f59e0b;
  --c-blocked: #ef4444;
  --c-meeting: #0ea5e9;
  --c-idle-fg: #86efac;
  --c-working-fg: #fcd34d;
  --c-blocked-fg: #fca5a5;
  --c-meeting-fg: #7dd3fc;

  /* tipografi */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-2xs: 12px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-2xl: 30px;
  --lh-tight: 1.25;
  --lh-base: 1.55;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-caps: 0.08em;

  /* spasi (4pt) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* bentuk & kedalaman */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 12px 32px rgba(0, 0, 0, 0.45);
  --sh-3: 0 24px 64px rgba(0, 0, 0, 0.55);
  --blur: 14px;
  --target: 36px;          /* tinggi kontrol minimum (desktop) */
  --target-touch: 44px;    /* tinggi kontrol minimum (sentuh) */

  /* motion */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* lapisan */
  --z-hud: 30;
  --z-panel: 40;
  --z-dialog: 70;
  --z-toast: 80;
  --z-fatal: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}