/* ICO Coffee Trade Globe — design tokens.
 *
 * Light is the primary theme (matching the institutional ICO house style);
 * dark is an override. Token NAMES are a stable API — eight JS modules read
 * them via getComputedStyle (choropleth, legend, rankList, pricesView, panels,
 * tooltip, globeView, app). Change values freely; never rename without
 * updating those consumers in the same commit.
 */

:root {
  color-scheme: light dark;

  /* ---- surfaces & ink (light) ---- */
  --bg: #faf3e1;
  --bg-2: #f5ead0;
  --bg-3: #ece0c0;
  --panel: #faf3e1;
  --panel-strong: #f5ead0;
  --panel-tooltip: #ffffff;

  --ink: #2a1612;
  --ink-dim: #6b3a32;
  /* --ink-mute is the smallest READABLE step (5.2:1). --ink-faint is 2.1:1 —
   * decorative and disabled states only, never text. */
  --ink-mute: #7d5f55;
  --ink-faint: #a8a9a6;

  /* Three-tier stroke system: rule < component < chrome */
  --line: rgba(81, 42, 36, 0.14);
  --line-strong: rgba(81, 42, 36, 0.32);

  --bean: #512a24;
  --bean-deep: #2a1612;
  --on-bean: #faf3e1;
  /* Masthead mark only. True black by owner decision — the brand mark keeps
   * the ORIGINAL logo colour, outside the warm ink ramp everything else uses. */
  --logo-ink: #000;
  --halo: rgba(250, 243, 225, 0.92);

  --cherry: #d12f08;
  --leaf: #4f9b2c;
  --gold: #d39314;
  --accent: #b3540a;
  --danger: #c0341a;
  --ok: #3f8f3a;

  /* ---- data-viz hues ---- */
  --viz-origin: #d98315;
  --viz-importer: #2f9b53;
  --viz-reexport: #c05f2a;
  --viz-arabica: #e0892a;
  --viz-robusta: #4f9b2c;
  --viz-cherry: #d12f08;
  /* The four I-CIP group indicators on the Prices chart. Not house hues: beside the
   * composite's --accent the warm family is spent, and these four hold apart from it
   * and from each other on both surfaces, colour-vision deficiencies included
   * (checked as a set, in legend order). Robustas keeps the species' green. */
  --viz-grp-cm: #2a78d6;
  --viz-grp-om: #e34948;
  --viz-grp-bn: #4a3aa7;
  --viz-grp-rb: #008300;

  /* ---- choropleth ramps (low → high) ---- */
  --ramp-origin-0: #f4e3c2;
  --ramp-origin-1: #a85c08;
  --ramp-import-0: #dfeccd;
  --ramp-import-1: #1f6b34;
  --ramp-reex-0: #f6ddca;
  --ramp-reex-1: #a8451c;
  /* Production is bivariate: depth carries volume, hue carries the species
   * mix (robusta end blended toward arabica end by arabica share). The base
   * is hue-neutral paper so it can sit under BOTH ends; -prod-1 remains the
   * fallback for a producer with no species detail. */
  --ramp-prod-0: #f3e4c6;
  --ramp-prod-1: #a32409;
  --ramp-prod-a-1: #b5670e;
  --ramp-prod-r-1: #33761a;
  --ramp-cons-prod-0: #f2dcab;
  --ramp-cons-prod-1: #5e3508;
  --ramp-cons-non-0: #cfe9c0;
  --ramp-cons-non-1: #154e29;
  /* unit value (USD/bag) — a price, so a distinct axis from the volume ramps */
  --ramp-unit-0: #efe7d2;
  --ramp-unit-1: #7a3f86;
  /* growth (CAGR) — a signed rate, so the one diverging ramp: a warm pole for
   * decline, a cool one for growth, a neutral grey between. The grey is
   * darker than a print diverging scale would use because it has to read as
   * "flat" beside two light neutrals already on the map — the no-data wash
   * and the ocean (checked with the dataviz validator against both). */
  --ramp-growth-neg: #a63d14;
  --ramp-growth-mid: #9aa0a5;
  --ramp-growth-pos: #1a6597;

  /* ---- basemap ----
   * Land is paper, sea is sand (the old-atlas relationship). Fill separation
   * is a deliberate 1.54:1 — gentle, because the coastline carries the
   * boundary at 4.3:1 against land. Colour on this map means data, not terrain.
   */
  /* Sea is NEUTRAL taupe, land is warm paper: the ocean must sit outside the
   * ramps' warm hue family or it reads as a data value. 1.46:1 fill
   * separation, with the coastline carrying the boundary at 4.3:1. */
  --ocean: #cfcaba;
  --ocean-2: #c2bcaa;
  --country-fill: #f6efdd;
  --country-line: #8a6a48;
  --graticule: rgba(81, 42, 36, 0.10);
  --equator: rgba(81, 42, 36, 0.20);
  --limb: rgba(42, 22, 18, 0.30);
  /* On cream, the atmosphere must READ AS OCCLUSION, not glow — a light halo
   * is invisible here. Same two rings, same stops, inverted luminance. */
  --atmo-rim: rgba(120, 78, 40, 0.30);
  --atmo-halo: rgba(120, 78, 40, 0.09);
  --hover-bright: 0.9;
  --label-ink: #2a1612;
  --label-halo: rgba(250, 243, 225, 0.92);
  --arc-end: #7a3c05;
  /* Coffee belt (drawn on request): the band between the tropics. Accent
   * family, kept faint so it never reads as a data value — the tint touches
   * only the sea, and the two lines are the edges of where coffee grows. */
  --belt-line: rgba(179, 84, 10, 0.62);
  --belt-fill: rgba(211, 147, 20, 0.14);
  --belt-ink: #8f4a0e;

  /* ---- type ---- */
  --font-ui: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;

  /* microcaps (mono, uppercase) */
  --fs-cap-xs: 8.5px;
  --fs-cap-sm: 9px;
  --fs-cap: 9.5px;
  --fs-cap-lg: 10px;
  --track-cap: 0.16em;
  --track-cap-wide: 0.18em;
  /* prose & names (Archivo) */
  --fs-sm: 11px;
  --fs: 12px;
  --fs-lg: 13px;
  /* display numerals — Archivo LIGHT, never black */
  --fs-display-sm: 22px;
  --fs-display: 30px;
  --fs-display-lg: 34px;

  /* ---- space / shape ---- */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;

  --r-sm: 2px;
  --r: 4px;
  --r-pill: 100px;

  --shadow: 0 12px 32px rgba(42, 22, 18, 0.16);
  --shadow-tooltip: 0 10px 28px rgba(42, 22, 18, 0.22);
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--bean);

  /* ---- motion — two curves, five durations, app-wide ---- */
  --dur-row: 120ms;
  --dur-input: 150ms;
  --dur-fill: 200ms;
  --dur-fade: 240ms;
  --dur-panel: 360ms;
  --ease-panel: cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-enter: cubic-bezier(0.25, 0.8, 0.3, 1);
}

:root[data-theme='dark'] {
  --bg: #2a1612;
  --bg-2: #3d1f1a;
  --bg-3: #1d0f0c;
  --panel: #2a1612;
  --panel-strong: #3d1f1a;
  --panel-tooltip: #3d1f1a;

  --ink: #faf3e1;
  --ink-dim: #d4ada4;
  --ink-mute: #b98d82;
  --ink-faint: #8a5048;

  --line: rgba(250, 243, 225, 0.10);
  --line-strong: rgba(250, 243, 225, 0.22);

  --bean: #edd6a4;
  --bean-deep: #c9a55e;
  --on-bean: #2a1612;
  --logo-ink: #edd6a4; /* black mark is invisible on coffee — keep the cream fill */
  --halo: rgba(42, 22, 18, 0.92);

  --cherry: #b12e0b;
  --leaf: #678e3e;
  --gold: #c9a55e;
  --accent: #ffd58a;
  --danger: #e2604a;
  --ok: #7fb069;

  --viz-origin: #d4a857;
  --viz-importer: #8ca87a;
  --viz-reexport: #c9865e;
  --viz-arabica: #edd6a4;
  --viz-robusta: #678e3e;
  --viz-cherry: #d84d3a;
  --viz-grp-cm: #3987e5;
  --viz-grp-om: #e66767;
  --viz-grp-bn: #9085e9;
  --viz-grp-rb: #008300;

  --ramp-origin-0: #5a4020;
  --ramp-origin-1: #f0c264;
  --ramp-import-0: #2c3d24;
  --ramp-import-1: #a8d18a;
  --ramp-reex-0: #4a2c1c;
  --ramp-reex-1: #eda06a;
  /* Bivariate production, dark: same two hue ends, lifted to read as light on
   * a dark basemap; the base is neutral coffee so neither hue owns the floor. */
  --ramp-prod-0: #4a3320;
  --ramp-prod-1: #e8503a;
  --ramp-prod-a-1: #f0c264;
  --ramp-prod-r-1: #a8d18a;
  /* reversed for a dark basemap: low is dim, high is bright */
  --ramp-cons-prod-0: #4a2c08;
  --ramp-cons-prod-1: #f2dcab;
  --ramp-cons-non-0: #14371f;
  --ramp-cons-non-1: #cfe9c0;
  --ramp-unit-0: #3a2c40;
  --ramp-unit-1: #d9a7e6;
  --ramp-growth-neg: #f0955f;
  --ramp-growth-mid: #62666a;
  --ramp-growth-pos: #57bde9;

  --ocean: #23110d;
  --ocean-2: #170b08;
  --country-fill: #3a221c;
  --country-line: #7a5142;
  --graticule: rgba(250, 243, 225, 0.06);
  --equator: rgba(250, 243, 225, 0.13);
  --limb: rgba(250, 243, 225, 0.22);
  --atmo-rim: rgba(200, 150, 105, 0.35);
  --atmo-halo: rgba(200, 150, 105, 0.10);
  --hover-bright: 1.22;
  --label-ink: #faf3e1;
  --label-halo: rgba(29, 15, 12, 0.82);
  --arc-end: #ffd58a;
  --belt-line: rgba(255, 213, 138, 0.55);
  --belt-fill: rgba(255, 213, 138, 0.08);
  --belt-ink: #ffd58a;

  --shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
  --shadow-tooltip: 0 10px 28px rgba(0, 0, 0, 0.5);
}