/* =============================================================
   Renegade Energy — data viz tokens
   Layered on colors_and_type.css. Defines semantic color rules
   for charts, tables, and number formatting.
   ============================================================= */

:root {
  /* ---------- Semantic data colors ----------
     Brand mapping (locked in):
       Orange  = solar / status quo / cost-of-the-problem
       Navy    = non-solar / Renegade / the alternative
       Purple  = third comparator only (rare; e.g. "all customers")
  */
  --data-renegade:   #030038;  /* navy-deep · the alternative */
  --data-renegade-2: #262262;  /* navy · secondary Renegade */
  --data-status-quo: #F47C21;  /* orange · solar / cost-of-problem */
  --data-status-quo-2:#F6974F; /* orange-light · second solar series */
  --data-third:      #4B4599;  /* purple · use sparingly */

  /* Negatives, neutrals, baselines */
  --data-negative:   #5C2A05;  /* deep burnt orange — losses, deficits */
  --data-baseline:   #605ABE;  /* navy-400 dashed reference line */
  --data-zero:       #ABA8D6;  /* navy-200 zero axis */
  --data-grid:       #E5E7F0;  /* gridlines */
  --data-grid-soft:  #F0F1F7;  /* minor gridlines */

  /* Sequential ramp (time-series with many series, e.g. duck curve)
     Light → deep, so "today" reads heaviest. 8 stops; cycle for >8. */
  --data-ramp-1:  #E0E0EE;
  --data-ramp-2:  #C2C0DE;
  --data-ramp-3:  #9D9BC8;
  --data-ramp-4:  #7975B2;
  --data-ramp-5:  #555199;
  --data-ramp-6:  #3A3680;
  --data-ramp-7:  #221F5C;
  --data-ramp-8:  #030038;

  /* Highlight (one orange line on top of a navy ramp = "this year") */
  --data-highlight: #F47C21;

  /* Diverging ramp (positive vs negative deltas in tables) */
  --delta-positive: #1F7A3F;   /* dark green — money saved */
  --delta-negative: #8E1A1A;   /* dark red — money lost */
  --delta-zero:     #6B6B7E;

  /* ---------- Annotation typography ---------- */
  --anno-label-size:  11px;    /* inline series labels */
  --anno-label-weight: 600;
  --anno-callout-size: 13px;   /* callout box body */
  --anno-callout-weight: 400;
  --anno-source-size: 11px;    /* source / footnote */
  --anno-source-color: var(--fg-3);
  --anno-leader-color: var(--rng-navy-400);

  /* ---------- Numeric typography ---------- */
  --num-tabular: "Manrope", "SF Mono", ui-monospace, monospace;
  --num-feature: "tnum" 1, "lnum" 1;
}

/* ---------- Chart frame ---------- */
.chart {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 24px 28px 20px;
  font-family: var(--font-sans);
}
.chart-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.chart-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 4px 0 2px;
}
.chart-subtitle {
  font-size: 13px;
  color: var(--fg-2);
  margin: 0 0 16px;
  font-weight: 400;
}
.chart-source {
  font-size: var(--anno-source-size);
  color: var(--anno-source-color);
  margin-top: 12px;
  border-top: 1px solid var(--border-light);
  padding-top: 10px;
  font-weight: 400;
}

/* ---------- Axis & gridline ---------- */
.axis-tick {
  font-family: var(--font-sans);
  font-feature-settings: var(--num-feature);
  font-size: 11px;
  fill: var(--fg-3);
  font-weight: 500;
}
.axis-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--fg-3);
}

/* ---------- Annotation ---------- */
.series-label {
  font-size: var(--anno-label-size);
  font-weight: var(--anno-label-weight);
  font-family: var(--font-sans);
}
.callout-box {
  font-size: var(--anno-callout-size);
  fill: var(--fg-1);
  font-weight: 500;
}

/* ---------- Tables ---------- */
.rng-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--fg-1);
}
.rng-table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: left;
  padding: 14px 16px;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-light);
}
.rng-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}
.rng-table tbody tr:last-child td { border-bottom: 0; }
.rng-table tfoot td {
  padding: 14px 16px;
  font-weight: 600;
  border-top: 2px solid var(--rng-navy-deep);
  background: var(--bg-sunken);
}
.rng-table .num {
  text-align: right;
  font-feature-settings: var(--num-feature);
  font-variant-numeric: tabular-nums lining-nums;
}
.rng-table .num-strong { font-weight: 600; }
.rng-table .delta-pos { color: var(--delta-positive); font-weight: 600; }
.rng-table .delta-neg { color: var(--delta-negative); font-weight: 600; }
.rng-table .delta-zero { color: var(--delta-zero); }

/* ---------- Number formatting helpers ---------- */
.num-c-kwh::after  { content: "¢/kWh"; margin-left: 2px; font-size: 0.85em; color: var(--fg-3); font-weight: 500; }
.num-d-mwh::after  { content: "$/MWh"; margin-left: 2px; font-size: 0.85em; color: var(--fg-3); font-weight: 500; }
.num-d-yr::after   { content: "/yr";  margin-left: 1px; font-size: 0.85em; color: var(--fg-3); font-weight: 500; }