/* tandemcompute — color tokens. Flat colours only; no gradients. */
:root {
  /* Base palette */
  --color-deep-navy: #14283A;
  --color-slate-blue: #506878;
  --color-burnt-copper: #B85C3F;
  --color-terracotta: #C9725B;
  --color-moss: #4E7A5F; /* "sustainable compute." green — brand sheet Jul 2026 */
  --color-carbon: #11161B;
  --color-graphite: #262D33;
  --color-fog: #E8EAEC;
  --color-bone: #F5F3EF;
  --color-white: #FFFFFF;

  /* Semantic — text */
  --text-primary: var(--color-carbon);
  --text-secondary: var(--color-slate-blue);
  --text-on-dark: var(--color-bone);
  --text-on-dark-muted: #8A99A5;
  --text-heat: var(--color-burnt-copper);

  /* Semantic — surfaces */
  --surface-page: var(--color-bone);
  --surface-card: var(--color-white);
  --surface-panel: var(--color-fog);
  --surface-dark: var(--color-carbon);
  --surface-dark-panel: var(--color-graphite);
  --surface-navy: var(--color-deep-navy);

  /* Semantic — lines (1px technical rules) */
  --line-neutral: var(--color-fog);
  --line-neutral-dark: var(--color-graphite);
  --line-cool: var(--color-slate-blue);
  --line-heat: var(--color-burnt-copper);

  /* Semantic — interactive */
  --action-primary: var(--color-carbon);
  --action-primary-hover: #2A343C;
  --action-accent: var(--color-burnt-copper);
  --action-accent-hover: #A44F35;
  --focus-ring: var(--color-slate-blue);

  /* Data visualisation */
  --chart-compute: var(--color-deep-navy);
  --chart-cool: var(--color-slate-blue);
  --chart-heat: var(--color-burnt-copper);
  --chart-heat-soft: var(--color-terracotta);
  --chart-baseline: #9AA4AB;
}