:root {
  /* Brand */
  --blue:       #1D9BF0;
  --blue-light: #1A8CD8;
  --blue-tint:  rgba(29,155,240,0.1);
  --blue-dark:  #1A8CD8;

  /* Text */
  --text-primary:   #0F1419;
  --text-secondary: #536471;
  --text-tertiary:  #8B98A5;

  /* Backgrounds */
  --bg-page:    #FFFFFF;
  --bg-surface: #FFFFFF;
  --bg-muted:   rgba(15,20,25,0.06);

  /* Borders */
  --border:       #EFF3F4;
  --border-light: #F7F9F9;

  /* Semantic */
  --green:       #00BA7C;
  --green-tint:  rgba(0,186,124,0.12);
  --green-dark:  #048459;
  --red:         #F4212E;
  --red-tint:    rgba(244,33,46,0.12);
  --red-dark:    #A8000A;
  --amber:       #FFD400;
  --amber-tint:  rgba(255,212,0,0.06);
  --amber-dark:  #7A6100;

  /* Layout */
  --sidebar-w:           220px;
  --sidebar-w-collapsed: 56px;
  --rp-w:                360px;

  /* Radius */
  --r-sm:   4px;
  --r-md:   16px;
  --r-lg:   16px;
  --r-pill: 9999px;

  /* Shadow */
  --shadow-sm: none;

  /* Font */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Heatmap intensity — blue (legacy) */
.hm-0 { background: #EFF3F4; }
.hm-1 { background: rgba(29,155,240,0.2); }
.hm-2 { background: rgba(29,155,240,0.45); }
.hm-3 { background: rgba(29,155,240,0.7); }
.hm-4 { background: #1D9BF0; }

/* Heatmap intensity — green (apresiasi): 0=kosong, 1=normal, 2=banyak */
.hm-pos-0 { background: #fff; }
.hm-pos-1 { background: #46c38b72; }
.hm-pos-2 { background: #00ba7ce2; }

/* Heatmap intensity — red (keluhan): 0=kosong, 1=normal, 2=banyak */
.hm-neg-0 { background: #fff; }
.hm-neg-1 { background: #f86f7886; }
.hm-neg-2 { background: #F4212E; }