/* vcbm-tokens.css — Design tokens CBMVision
   Sumber: 06-DESIGN-GUIDELINE-FROM-FIGMA.md (base) + 13-DESIGN-SYSTEM.md (adaptasi CBMVision)
   Jangan hardcode hex color di file lain — selalu rujuk variable ini. */

:root {
  /* Base tokens (dari 06-DESIGN-GUIDELINE-FROM-FIGMA.md) */
  --sig-navy: #1E4480;
  --sig-blue: #2A6AB0;
  --sig-primary: #005EFF;
  --sig-primary-light: #E6EFFF;
  --sig-text: #2D2E31;
  --sig-bg: #F8F8F9;
  --sig-border: #ECEDEF;
  --sig-success: #3EB645;
  --sig-warning: #F59E0B;
  --sig-critical: #E90229;

  /* Zone convention (ISO 20816-3 / IEEE C57.104) */
  --zone-a: #3EB645;   /* hijau */
  --zone-b: #FFE9A8;   /* kuning muda */
  --zone-c: #F59E0B;   /* amber */
  --zone-d: #E90229;   /* merah */

  /* Module accent (13-DESIGN-SYSTEM.md §4) */
  --accent-command-center: var(--sig-navy);
  --accent-template-registry: var(--sig-primary);
  --accent-sensor-config: #B87524;   /* amber, area teknis */
  --accent-data-exploration: #0E9AA7; /* teal/cyan, analytics tool */

  /* Layout */
  --sidebar-width: 248px;
  --topbar-height: 56px;
  --card-radius: 12px;

  /* Typography */
  --font-family: 'Inter', sans-serif;
}

body {
  font-family: var(--font-family);
  background: var(--sig-bg);
  color: var(--sig-text);
  margin: 0;
}

.card {
  background: #FFFFFF;
  border: 1px solid var(--sig-border);
  border-radius: var(--card-radius);
  padding: 16px;
}

/* Zone badge */
.zone-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.zone-a { background: color-mix(in srgb, var(--zone-a) 15%, white); color: var(--zone-a); }
.zone-b { background: var(--zone-b); color: #7A5B00; }
.zone-c { background: color-mix(in srgb, var(--zone-c) 15%, white); color: var(--zone-c); }
.zone-d { background: color-mix(in srgb, var(--zone-d) 15%, white); color: var(--zone-d); }

/* HelpTip components — placeholder styling, dibangun lebih lengkap saat page build */
.card-info-tooltip { position: absolute; top: 12px; right: 12px; cursor: help; color: #9CA3AF; }
.page-helptip-btn { cursor: pointer; border: 1px solid var(--sig-border); border-radius: 50%; width: 28px; height: 28px; }
.sticky-help-fab {
  position: fixed; bottom: 24px; right: 24px; width: 52px; height: 52px;
  border-radius: 50%; background: var(--sig-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(0,94,255,0.24); cursor: pointer; z-index: 999;
}