/* Token desain bersama (dasbor dan 3D). Tema terang bawaan; gelap lewat
   prefers-color-scheme atau atribut data-theme pada <html>. */
:root {
  color-scheme: light;

  /* Warna: permukaan, teks, batas */
  --color-bg: #f6f7f9;
  --color-surface: #ffffff;
  --color-surface-2: #eef0f4;
  --color-text: #171a20;
  --color-text-muted: #566070;
  --color-border: #d8dce3;
  --color-border-strong: #7d8696;
  --color-overlay: rgba(15, 18, 25, .5);
  --color-focus: #4338ca;

  /* Aksen indigo */
  --color-accent: #4f46e5;
  --color-accent-hover: #4338ca;
  --color-accent-contrast: #ffffff;
  --color-accent-soft: #e8e8fd;
  --color-accent-text: #3730a3;

  /* Semantik */
  --color-success: #166534;
  --color-success-soft: #dcf5e4;
  --color-warning: #9a4507;
  --color-warning-soft: #fdeccb;
  --color-danger: #b91c1c;
  --color-danger-soft: #fde4e4;
  --color-info: #1d4ed8;
  --color-info-soft: #dfe9fd;

  /* Status kerja (sama di dasbor dan 3D) */
  --status-working: #15803d;
  --status-blocked: #b45309;
  --status-stuck: #b91c1c;
  --status-leave: #1d4ed8;
  --status-idle: #566070;

  /* Warna aksen untuk nilai katalog */
  --accent-1: #4f46e5;
  --accent-2: #0e7490;
  --accent-3: #a21caf;
  --accent-4: #be123c;

  /* Deret grafik dan komponen swm-* (kontras >= 3:1 terhadap --color-surface) */
  --swm-series-1: #4f46e5;
  --swm-series-2: #0e7490;
  --swm-series-3: #a21caf;
  --swm-series-4: #be123c;
  --swm-series-5: #15803d;
  --swm-series-6: #b45309;
  --series-1: var(--swm-series-1);
  --series-2: var(--swm-series-2);
  --series-3: var(--swm-series-3);
  --series-4: var(--swm-series-4);
  --series-5: var(--swm-series-5);
  --series-6: var(--swm-series-6);
  --swm-grad-1: var(--color-accent);
  --swm-grad-2: var(--color-accent);
  --swm-kpi-1: var(--swm-series-1);
  --swm-kpi-2: var(--swm-series-2);
  --swm-kpi-3: var(--swm-series-3);
  --swm-kpi-4: var(--swm-series-4);
  --swm-hero-glow-1: transparent;
  --swm-hero-glow-2: transparent;
  --swm-glow-opacity: 0;
  --swm-tint: 0%;
  /* Latar dan gradasi paket aurora: netral di sini; warna hanya di templates/aurora/theme.css */
  --aurora-bg: none;
  --card-gradient: none;
  --kpi-gradient: none;
  --font-display: var(--font-sans);
  --swm-motion: normal;
  --swm-shadow-pop: 0 8px 20px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .08);

  /* Ukuran komponen swm-* */
  --swm-radius-xs: 4px;
  --swm-icon: 20px;
  --swm-avatar-sm: 28px;
  --swm-avatar-md: 36px;
  --swm-avatar-lg: 48px;
  --swm-appbar-h: 56px;
  --swm-btn-lg: 48px;
  --swm-check: 20px;
  --swm-switch-w: 44px;
  --swm-track-h: 6px;
  --swm-dialog-w: 480px;
  --swm-drawer-w: 400px;
  --swm-popover-w: 320px;
  --swm-toast-w: 420px;
  --swm-menu-w: 180px;
  --swm-dur-spin: 700ms;
  --swm-dur-shimmer: 1.4s;

  /* Spasi, skala 4 px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Bayangan halus */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-md: 0 4px 10px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .06);
  --shadow-lg: 0 16px 32px rgba(16, 24, 40, .14), 0 4px 8px rgba(16, 24, 40, .08);

  /* Tipografi */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Gerak */
  --duration-fast: 120ms;
  --duration-base: 160ms;
  --duration-slow: 200ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);

  /* Ukuran dan lapisan */
  --tap-min: 40px;
  --z-dropdown: 40;
  --z-overlay: 60;
  --z-toast: 80;
  --z-tooltip: 90;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0e1116;
    --color-surface: #161b22;
    --color-surface-2: #212833;
    --color-text: #e9ecf1;
    --color-text-muted: #a2acba;
    --color-border: #2d3643;
    --color-border-strong: #707b8c;
    --color-overlay: rgba(0, 0, 0, .65);
    --color-focus: #a5b4fc;
    --color-accent: #818cf8;
    --color-accent-hover: #a5b4fc;
    --color-accent-contrast: #0e1116;
    --color-accent-soft: #272a52;
    --color-accent-text: #c7d2fe;
    --color-success: #4ade80;
    --color-success-soft: #14301f;
    --color-warning: #fbbf24;
    --color-warning-soft: #392a0c;
    --color-danger: #f87171;
    --color-danger-soft: #3b1818;
    --color-info: #60a5fa;
    --color-info-soft: #14284a;
    --status-working: #4ade80;
    --status-blocked: #fbbf24;
    --status-stuck: #f87171;
    --status-leave: #60a5fa;
    --status-idle: #a2acba;
    --accent-1: #818cf8;
    --accent-2: #22d3ee;
    --accent-3: #e879f9;
    --accent-4: #fb7185;
    --swm-series-1: #818cf8;
    --swm-series-2: #22d3ee;
    --swm-series-3: #e879f9;
    --swm-series-4: #fb7185;
    --swm-series-5: #4ade80;
    --swm-series-6: #fbbf24;
    --aurora-bg: none;
    --card-gradient: none;
    --kpi-gradient: none;
    --swm-shadow-pop: 0 8px 20px rgba(0, 0, 0, .55);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, .5);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0e1116;
  --color-surface: #161b22;
  --color-surface-2: #212833;
  --color-text: #e9ecf1;
  --color-text-muted: #a2acba;
  --color-border: #2d3643;
  --color-border-strong: #707b8c;
  --color-overlay: rgba(0, 0, 0, .65);
  --color-focus: #a5b4fc;
  --color-accent: #818cf8;
  --color-accent-hover: #a5b4fc;
  --color-accent-contrast: #0e1116;
  --color-accent-soft: #272a52;
  --color-accent-text: #c7d2fe;
  --color-success: #4ade80;
  --color-success-soft: #14301f;
  --color-warning: #fbbf24;
  --color-warning-soft: #392a0c;
  --color-danger: #f87171;
  --color-danger-soft: #3b1818;
  --color-info: #60a5fa;
  --color-info-soft: #14284a;
  --status-working: #4ade80;
  --status-blocked: #fbbf24;
  --status-stuck: #f87171;
  --status-leave: #60a5fa;
  --status-idle: #a2acba;
  --accent-1: #818cf8;
  --accent-2: #22d3ee;
  --accent-3: #e879f9;
  --accent-4: #fb7185;
  --swm-series-1: #818cf8;
  --swm-series-2: #22d3ee;
  --swm-series-3: #e879f9;
  --swm-series-4: #fb7185;
  --swm-series-5: #4ade80;
  --swm-series-6: #fbbf24;
  --aurora-bg: none;
  --card-gradient: none;
  --kpi-gradient: none;
  --swm-shadow-pop: 0 8px 20px rgba(0, 0, 0, .55);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, .5);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, .6);
}