/* ==========================================================================
   GEOMORPHIC AI — DATA VISUALISATION TOKENS
   Load AFTER css/brand.css. Adds only; overrides nothing.

   Naming follows the existing --gm-* convention. Where a chart value is
   already a brand token it is aliased, so the link to brand.css stays visible.

   Surfaces these values were validated against:
     dark  --gm-basalt-900  #0A0A0A   (the technical-figure plate)
     light --gm-paper       #F4F2EC   (report / print)

   Every value here is a computed step that passes the six checks in
   validate-palette.mjs. Substituting one by eye invalidates the set —
   re-run the validator before shipping any change.
   ========================================================================== */

:root {

  /* ---- new hue ramps -----------------------------------------------------
     The existing brand ramps cannot supply these. Chroma on the 100–900 ramps
     collapses below step 600 (blue-700 C 0.091, teal-700 C 0.086, teal-800
     C 0.063) and a data mark needs C >= 0.10 or it reads grey. Only the
     steps actually used by a chart are defined.
     -------------------------------------------------------------------- */
  --gm-sienna-500:  #C17216;
  --gm-sienna-600:  #B76B14;
  --gm-magenta-500: #C65BA2;
  --gm-magenta-600: #C459A1;
  --gm-leaf-500:    #2F963B;
  --gm-leaf-600:    #218B30;
  --gm-cyan-500:    #1993A6;
  --gm-cyan-600:    #1A96AA;
  --gm-red-500:     #C2454D;
  --gm-red-600:     #B23641;
  --gm-violet-500:  #8661CC;
  --gm-violet-600:  #7A55BF;

  /* chart-specific steps of the two brand hues — chroma held where the
     brand ramp lets it go */
  --gm-blue-viz-600:  #1377A8;
  --gm-teal-viz-550:  #168973;
  --gm-teal-viz-500:  #1EA98E;

  /* ---- categorical series ------------------------------------------------
     FIXED ORDER. Assigned in sequence, never cycled. A 9th series is never a
     new hue — it folds into "Other", or the chart becomes small multiples.
     -------------------------------------------------------------------- */
  --gm-viz-1: var(--gm-blue-500);      /* Signal Blue — the brand hex, unchanged */
  --gm-viz-2: var(--gm-teal-viz-550);
  --gm-viz-3: var(--gm-sienna-500);
  --gm-viz-4: var(--gm-magenta-500);
  --gm-viz-5: var(--gm-leaf-500);
  --gm-viz-6: var(--gm-cyan-500);
  --gm-viz-7: var(--gm-red-500);
  --gm-viz-8: var(--gm-violet-500);

  /* ---- reserved: NOT available as series colours ------------------------ */
  --gm-viz-highlight: var(--gm-gold-500);   /* emphasis only — one per view */
  --gm-viz-on-highlight: var(--gm-black);

  /* ---- sequential (magnitude) -------------------------------------------
     Signal Blue, one hue. The named steps are fixed; the DIRECTION is not.
     Near-zero always takes the step closest to the ground, so on the black
     plate magnitude runs dark -> light. Ship it unflipped on black and the
     anomaly becomes the least visible thing in the figure.
     -------------------------------------------------------------------- */
  --gm-seq-100: #E2F3FE;  --gm-seq-150: #BEE4FD;  --gm-seq-200: #97D5FD;
  --gm-seq-250: #6CC5FC;  --gm-seq-300: #2DB5FB;  --gm-seq-350: #1EA3E4;
  --gm-seq-400: #1A92CC;  --gm-seq-450: #1580B4;  --gm-seq-500: #116F9D;
  --gm-seq-550: #0C5F87;  --gm-seq-600: #084F71;  --gm-seq-650: #053F5C;
  --gm-seq-700: #023048;

  /* five-step ordinal window — the surface-nearest step still clears 2:1 */
  --gm-ord-1: var(--gm-seq-150);  --gm-ord-2: var(--gm-seq-250);
  --gm-ord-3: var(--gm-seq-350);  --gm-ord-4: var(--gm-seq-450);
  --gm-ord-5: var(--gm-seq-550);

  /* second concurrent sequential context — Belt Teal */
  --gm-seq2-100: #C6FEEE; --gm-seq2-200: #2FECC7; --gm-seq2-300: #25C4A5;
  --gm-seq2-400: #1B9D84; --gm-seq2-500: #127865; --gm-seq2-600: #095647;
  --gm-seq2-700: #02352B;

  /* ---- diverging (polarity) ---------------------------------------------
     Signal Blue <-> Ember, neutral grey midpoint. Only where a real baseline
     exists: residual after background subtraction, grade against a cut-off,
     change since last survey. Never for plain magnitude.
     -------------------------------------------------------------------- */
  --gm-div-neg-3: #1D9DDB; --gm-div-neg-2: #11719F; --gm-div-neg-1: #064867;
  --gm-div-mid:   #2A2A28;
  --gm-div-pos-1: #7A3707; --gm-div-pos-2: #B45611; --gm-div-pos-3: #E27733;

  /* ---- status (fixed meanings, never themed, never a series) ------------- */
  --gm-viz-good:     #3FAE6E;
  --gm-viz-warning:  var(--gm-gold-500);
  --gm-viz-serious:  #D98A3C;
  --gm-viz-critical: var(--gm-ember-500);
  --gm-viz-warning-ink: var(--gm-gold-500);   /* readable text form — see paper scope */

  /* ---- chart chrome ------------------------------------------------------ */
  --gm-viz-surface:  var(--gm-basalt-900);
  --gm-viz-plane:    var(--gm-black);
  --gm-viz-ink:      var(--gm-white);
  --gm-viz-ink-2:    var(--gm-basalt-200);
  --gm-viz-ink-mute: #6F6F6A;
  --gm-viz-grid:     #1C1C1A;
  --gm-viz-axis:     #333330;
  --gm-viz-hairline: rgba(255,255,255,0.10);

  /* ---- mark geometry ----------------------------------------------------- */
  --gm-viz-stroke:      2px;    /* line series */
  --gm-viz-marker:      8px;    /* minimum marker diameter */
  --gm-viz-bar-radius:  4px;    /* data-end only — the baseline end stays square */
  --gm-viz-gap:         2px;    /* surface gap between fills and rings on overlaps */
  --gm-viz-hairline-w:  1px;
}

/* ==========================================================================
   REPORT / PRINT SURFACE
   Apply data-surface="paper" to the figure container (or <html> for a whole
   print stylesheet). These are SELECTED steps for the paper surface, not an
   automatic inversion of the dark values.
   ========================================================================== */
[data-surface="paper"] {
  --gm-viz-1: var(--gm-blue-viz-600);
  --gm-viz-2: var(--gm-teal-viz-500);
  --gm-viz-3: var(--gm-sienna-600);
  --gm-viz-4: var(--gm-magenta-600);
  --gm-viz-5: var(--gm-leaf-600);
  --gm-viz-6: var(--gm-cyan-600);
  --gm-viz-7: var(--gm-red-600);
  --gm-viz-8: var(--gm-violet-600);

  --gm-viz-highlight: #A18216;      /* gold cannot hold its brand value on paper */
  --gm-viz-on-highlight: var(--gm-white);
  --gm-viz-warning-ink: #6B5207;    /* gold-500 is 1.51:1 on paper — unusable as text */

  /* sequential direction inverts: near-zero is now the LIGHT end */
  --gm-ord-1: var(--gm-seq-300);  --gm-ord-2: var(--gm-seq-400);
  --gm-ord-3: var(--gm-seq-500);  --gm-ord-4: var(--gm-seq-600);
  --gm-ord-5: var(--gm-seq-700);

  --gm-div-neg-3: #095377; --gm-div-neg-2: #147DB0; --gm-div-neg-1: #20AAED;
  --gm-div-mid:   #EDEDEA;
  --gm-div-pos-1: #F08341; --gm-div-pos-2: #C65F14; --gm-div-pos-3: #8A400A;

  --gm-viz-surface:  var(--gm-paper);
  --gm-viz-plane:    var(--gm-white);
  --gm-viz-ink:      #0B0B0A;
  --gm-viz-ink-2:    #52514E;
  --gm-viz-ink-mute: #898781;
  --gm-viz-grid:     #E4E3DE;
  --gm-viz-axis:     #C6C5BE;
  --gm-viz-hairline: rgba(11,11,10,0.12);
}

/* ==========================================================================
   FIGURE PRIMITIVES
   ========================================================================== */
.gm-figure {
  background: var(--gm-viz-surface);
  border: var(--gm-viz-hairline-w) solid var(--gm-viz-hairline);
  border-radius: var(--gm-radius-0);
  padding: var(--gm-space-5);
}
.gm-figure svg { display: block; width: 100%; height: auto; }

/* axis and tick text — never wears a series colour */
.gm-viz-axis-text { font-family: var(--gm-font-mono); font-size: var(--gm-fs-label);
                    fill: var(--gm-viz-ink-mute); font-variant-numeric: tabular-nums; }
.gm-viz-label     { font-family: var(--gm-font-mono); font-size: var(--gm-fs-caption);
                    fill: var(--gm-viz-ink-2); font-variant-numeric: tabular-nums; }
.gm-viz-grid      { stroke: var(--gm-viz-grid); stroke-width: 1; }
.gm-viz-baseline  { stroke: var(--gm-viz-axis); stroke-width: 1; }
.gm-viz-line      { fill: none; stroke-width: var(--gm-viz-stroke); stroke-linejoin: round; }
.gm-viz-marker    { stroke: var(--gm-viz-surface); stroke-width: var(--gm-viz-gap); }

.gm-viz-legend { display: flex; flex-wrap: wrap; gap: var(--gm-space-5);
                 margin-bottom: var(--gm-space-4); }
.gm-viz-legend span { display: inline-flex; align-items: center; gap: var(--gm-space-2);
                      font-size: var(--gm-fs-caption); color: var(--gm-viz-ink-2); }
.gm-viz-legend i { width: 11px; height: 11px; display: block; }

.gm-figure figcaption { font-size: var(--gm-fs-caption); color: var(--gm-viz-ink-mute);
                        margin-top: var(--gm-space-3);
                        border-top: 1px solid var(--gm-viz-hairline);
                        padding-top: var(--gm-space-3); }

/* tooltip — one element shared by every chart on the page */
.gm-viz-tip{
  position: fixed; pointer-events: none; z-index: 60; opacity: 0;
  transition: opacity 90ms var(--gm-ease, ease);
  background: var(--gm-viz-plane); border: 1px solid var(--gm-viz-hairline);
  padding: var(--gm-space-2) var(--gm-space-3); max-width: 240px;
  font-family: var(--gm-font-body); font-size: var(--gm-fs-caption);
  box-shadow: var(--gm-shadow-md);
}
.gm-viz-tip .t{ font-weight: 700; margin-bottom: 4px; color: var(--gm-viz-ink); }
.gm-viz-tip .r{ display: flex; justify-content: space-between; gap: var(--gm-space-5);
  color: var(--gm-viz-ink-2); font-family: var(--gm-font-mono);
  font-variant-numeric: tabular-nums; }
.gm-viz-tip .r b{ color: var(--gm-viz-ink); font-weight: 500; }

/* tables are the relief channel wherever a fill sits below 3:1 */
.gm-viz-table { width: 100%; border-collapse: collapse; font-size: var(--gm-fs-caption); }
.gm-viz-table td.num, .gm-viz-table th.num { text-align: right;
  font-family: var(--gm-font-mono); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   ACCESSIBILITY CHANNEL
   Texture is not decorative and is never on by default. Colour alone never
   carries identity: >= 2 series always have a legend, <= 4 are also direct-
   labelled, and a table view always exists.
   ========================================================================== */
@media (forced-colors: active) {
  .gm-viz-line, .gm-viz-marker { forced-color-adjust: none; }
  .gm-figure { border-color: CanvasText; }
}
@media print {
  .gm-figure { background: #fff; border-color: #999; }
}
@media (prefers-reduced-motion: reduce) {
  .gm-figure * { transition: none !important; animation: none !important; }
}