/* ==========================================================================
   Design tokens
   Kemenkes RI identity palette, with GroundSight pink as the highlight colour.
   Every other stylesheet reads colours, fonts and spacing from here.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Kemenkes RI */
  --km-green:   #2D7A6A;                 /* hijau tua: primary buttons, top bar */
  --km-green-d: #225E52;                 /* hover */
  --km-green-l: #EAF7F3;                 /* tint */
  --km-green-m: rgba(64, 190, 161, .16); /* focus ring */
  --km-tq:      #40BEA1;                 /* Turquoise, C75 M0 Y45 K0 */
  --km-lime:    #CCE310;                 /* Hijau kuning, C20 M0 Y100 K0 */
  --km-teal:    #2A8F97;                 /* Turquoise medium, darkened for text */
  --km-teal-l:  #E8F7F8;

  /* GroundSight pink (highlight only) */
  --pink:      #DB2777;
  --pink-d:    #9D174D;
  --pink-l:    #FDF2F8;
  --pink-m:    rgba(219, 39, 119, .10);
  --pink-line: #F6C3DA;

  /* Neutrals, white-first */
  --bg:       #FFFFFF;
  --bg-2:     #F7F8F7;
  --bg-3:     #F0F2F1;
  --bg-4:     #E4E7E5;
  --border:   #E4E7E5;
  --border-s: #D3D8D5;
  --text:     #2B2B2A;
  --text-2:   #696968;                   /* Kemenkes Abu-abu, C58 M50 Y51 K19 */
  --text-3:   #6F6F6D;                   /* captions: 4.5:1+ on white and light grey (WCAG AA) */
  --text-4:   #949492;                   /* icons, placeholders: 3:1 on white */

  /* Status */
  --err:       #DC2626;
  --warn-bg:   #FEF3C7;
  --warn-text: #7A5B00;

  /* UNICEF framework levels (dashboard) */
  --lv-outcome:    var(--pink);
  --lv-immediate:  #7C8A0A;
  --lv-underlying: #2D7A6A;
  --lv-enabling:   #9D174D;

  /* Sequential heat scale (dashboard heatmap), 0 → many reports */
  --h0: #F7F8F7;
  --h1: #FCE7F1;
  --h2: #F7B9D5;
  --h3: #EC6FA6;
  --h4: #DB2777;
  --h5: #9D174D;

  /* Highlighter-pen underline used on key numbers and quotes */
  --mark: linear-gradient(transparent 60%, rgba(219, 39, 119, .24) 60%);

  /* Type */
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* Shape */
  --rad:      8px;
  --shadow:   0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
  --shadow-m: 0 4px 12px rgba(0, 0, 0, .10), 0 2px 4px rgba(0, 0, 0, .06);

  /* Dashboard page column: side gutter, max content width, resulting padding */
  --gut:   clamp(16px, 3.2vw, 40px);
  --wrap:  1240px;
  --pad-x: max(var(--gut), calc((100% - var(--wrap)) / 2));
}