/* Masagana Gas — Colour tokens (official brand palette).
   Rich Gas Blue leads; Deep Cove carries text and "highest value";
   Red Flame is reserved for alerts and the "lowest value" marker only.
   The blue is a nod to the Philippines; the red is the flame that lives on. */
:root {
  /* Official brand colours */
  --rich-gas-blue: #4490BA;  /* R68 G144 B186 — primary brand + hero data fill */
  --deep-cove: #0A084D;      /* R10 G8 B77 — text, dark grounds, highest-value marker */
  --red-flame: #DB3832;      /* R219 G56 B50 — alerts + lowest-value marker ONLY */
  --white-smoke: #F5F3F4;    /* R245 G243 B244 — light ground */

  /* Back-compat aliases (original token names) */
  --mg-teal: var(--rich-gas-blue);
  --mg-navy: var(--deep-cove);
  --mg-red: var(--red-flame);

  /* Neutrals */
  --mg-paper: var(--white-smoke);
  --mg-steel: #6E6E6B;       /* secondary text, captions */
  --mg-mist: #E6E6E4;        /* hairlines, muted bars, inactive dots */

  /* Rich Gas Blue tint ramp — mid values, lightest → primary */
  --mg-teal-100: #C6DEEB;
  --mg-teal-200: #94BFD8;
  --mg-teal-300: #6AA4C7;
  --mg-teal-400: #4490BA;

  /* ---- Semantic aliases ---- */
  --surface-page: var(--mg-paper);
  --surface-dark: var(--mg-navy);
  --surface-card: #FFFFFF;
  --surface-muted: var(--mg-mist);

  --text-strong: var(--mg-navy);
  --text-body: var(--mg-navy);
  --text-muted: var(--mg-steel);
  --text-on-dark: var(--mg-paper);

  --border-hairline: var(--mg-mist);
  --border-rule: var(--mg-navy);

  --accent: var(--mg-teal);
  --signal: var(--mg-red);

  /* Data-viz value scale — visual weight follows value.
     Highest = navy (reads first); lowest = red (flagged); middle fades along teal ramp. */
  --data-high: var(--mg-navy);
  --data-mid-4: var(--mg-teal-400);
  --data-mid-3: var(--mg-teal-300);
  --data-mid-2: var(--mg-teal-200);
  --data-mid-1: var(--mg-teal-100);
  --data-low: var(--mg-red);
  --data-muted: var(--mg-mist);   /* de-emphasised / single-focus background bars */
}