/**
 * GTCX Africa / Global South chrome tokens
 * Source: domain/design-system/tokens/gtcx-africa-chrome.tokens.json
 * Chronicle editorial structure · warm mineral-and-earth palette
 */

:root,
[data-gtcx-theme="africa-chrome"] {
  /* —— Chrome surfaces —— */
  --gtcx-canvas: #faf6f0;
  --gtcx-section-alt: #ede4d6;
  --gtcx-ink: #1a1512;
  --gtcx-ink-muted: #5c534a;
  --gtcx-ink-subtle: #8a8076;
  --gtcx-hairline: #d9cfc2;
  --gtcx-shadow: 0 2px 24px rgba(26, 21, 18, 0.1);

  /* —— Brand —— */
  --gtcx-verification: #0b7b6e;
  --gtcx-gold: #c9a227;
  --gtcx-teal-compat: #0d9488;

  /* —— Commodity / content frame —— */
  --gtcx-laterite: #b85c38;
  --gtcx-copper: #b87333;
  --gtcx-ochre: #d4a017;
  --gtcx-forest: #1b4d3e;
  --gtcx-indigo-dusk: #1e2a4a;
  --gtcx-savanna: #e8d5a3;
  --gtcx-cobalt: #2e4a7a;

  /* —— Semantic —— */
  --gtcx-success: #1b6b52;
  --gtcx-warning: #c47f17;
  --gtcx-danger: #9e3b2f;
  --gtcx-info: #2e4a7a;

  /* —— Finance & markets —— */
  --gtcx-settlement: #0b7b6e;
  --gtcx-issuance: #c9a227;
  --gtcx-sovereign: #1e2a4a;
  --gtcx-tokenized: #3d5a80;
  --gtcx-trade-finance: #b87333;
  --gtcx-liquidity: #1b6b52;
  --gtcx-yield: #d4a017;
  --gtcx-risk: #9e3b2f;

  /* —— Chart series (semantic) —— */
  --gtcx-chart-commodity-spot: var(--gtcx-copper);
  --gtcx-chart-commodity-future: var(--gtcx-ochre);
  --gtcx-chart-trade-volume: var(--gtcx-verification);
  --gtcx-chart-capital-flow: var(--gtcx-issuance);
  --gtcx-chart-sovereign-spread: var(--gtcx-sovereign);
  --gtcx-chart-tokenized: var(--gtcx-tokenized);
  --gtcx-chart-trade-finance: var(--gtcx-trade-finance);
  --gtcx-chart-esg: var(--gtcx-forest);

  /* —— Chart series (legacy index) —— */
  --gtcx-chart-1: var(--gtcx-verification);
  --gtcx-chart-2: var(--gtcx-copper);
  --gtcx-chart-3: var(--gtcx-ochre);
  --gtcx-chart-4: var(--gtcx-laterite);
  --gtcx-chart-5: var(--gtcx-forest);
  --gtcx-chart-6: var(--gtcx-cobalt);

  /* —— Typography —— */
  --gtcx-font-ui: "DM Sans", Inter, system-ui, sans-serif;
  --gtcx-font-display: "Source Serif 4", Literata, Georgia, serif;
  --gtcx-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --gtcx-type-display-size: 54px;
  --gtcx-type-display-tracking: -0.03em;
  --gtcx-type-heading-size: 48px;
  --gtcx-type-heading-tracking: -0.03em;
  --gtcx-type-body-size: 16px;

  /* —— Shape —— */
  --gtcx-radius-button: 4px;
  --gtcx-radius-card: 8px;
  --gtcx-space-unit: 4px;
  --gtcx-max-width: 1212px;
}

/* Studio shell hook — import after studio-hub.css */
.studio[data-gtcx-theme="africa-chrome"],
.studio.gtcx-africa-chrome {
  background: var(--gtcx-canvas);
  color: var(--gtcx-ink);
  font-family: var(--gtcx-font-ui);
  font-size: var(--gtcx-type-body-size);
}

.studio.gtcx-africa-chrome .studio-chrome {
  background: var(--gtcx-canvas);
  border-bottom-color: var(--gtcx-hairline);
}

.studio.gtcx-africa-chrome .studio-chrome__mode {
  font-family: var(--gtcx-font-mono);
  color: var(--gtcx-ink-subtle);
  border-left-color: var(--gtcx-hairline);
}

.studio.gtcx-africa-chrome .studio-chrome__live {
  background: var(--gtcx-ink);
  color: var(--gtcx-canvas);
}

.studio.gtcx-africa-chrome .studio-chrome__live:hover {
  background: #2a2420;
}

.studio.gtcx-africa-chrome .studio-assets,
.studio.gtcx-africa-chrome .studio-rail,
.studio.gtcx-africa-chrome .studio-preview__viewport {
  background: var(--gtcx-canvas);
}

.studio.gtcx-africa-chrome .studio-rail__link.is-active {
  border-bottom-color: var(--gtcx-verification);
}

.studio.gtcx-africa-chrome .count--review {
  color: var(--gtcx-verification);
}

.studio.gtcx-africa-chrome .studio-hub__hero {
  background: var(--gtcx-section-alt);
}

.studio.gtcx-africa-chrome .studio-page {
  background: var(--gtcx-canvas);
  border-color: var(--gtcx-hairline);
  box-shadow: var(--gtcx-shadow);
}

.studio.gtcx-africa-chrome h1,
.studio.gtcx-africa-chrome .studio-hub__hero h1 {
  font-family: var(--gtcx-font-display);
  letter-spacing: var(--gtcx-type-display-tracking);
}

.studio.gtcx-africa-chrome [data-preview-frame] {
  border: 1px solid var(--gtcx-hairline);
  border-radius: var(--gtcx-radius-card);
  box-shadow: var(--gtcx-shadow);
}