/* Design tokens — mirrors the Figma variables of "Bursa Bullion Emas Dashboard". */
:root {
  /* Background & surface */
  --background-primary: #ffffff;
  --background-secondary: #fdfbfb;
  --background-tertiary: #f2f2f2;
  --surface-primary: #ffffff;

  --background-overlay: rgba(31, 31, 31, 0.48);

  /* Stroke */
  --stroke-primary: #e5e5e5;
  --stroke-sidebar: #eaecf0;

  /* Content */
  --content-primary: #1f1f1f;
  --content-secondary: #525252;
  --content-tertiary: #a3a3a3;
  --content-inverse: #ffffff;
  --neutral-800: #1f1f1f;

  /* Brand (dashboard) */
  --primary: #196bcd;
  --primary-25: #f6f9ff;
  --primary-200: #a1c4f5;

  /* Brand (login / dark CTA) */
  --primary-dark: #141414;

  /* Semantic */
  --guide-50: #fafcff;
  --guide-100: #ecf3fe;
  --guide-600: #0049b8;
  --positive-100: #edfded;
  --positive-500: #3cc14e;
  --positive-600: #288034;
  --warning-100: #fff9eb;
  --warning-400: #ffcc14;
  --warning-600: #855f00;
  --negative-100: #fdeded;
  --negative-500: #f02d2d;
  --negative-600: #d50b0b;
  --teal-100: #effbfb;
  --content-guide: #0968f6;

  /* Login */
  --login-bg: #fcfcff;
  --login-pixel: #202887;
  --login-pixel-lit: #3e3ef4;

  /* Radius */
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-pill: 999px;

  /* Typography */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 72px;
  --drawer-width: 480px;

  /* Elevation */
  --shadow-card: 0 2px 6px rgba(32, 40, 135, 0.05), 0 24px 56px rgba(32, 40, 135, 0.08);
  --shadow-drawer: -16px 0 48px rgba(20, 20, 20, 0.12);
  --shadow-menu: 0 8px 24px rgba(20, 20, 20, 0.12);
}