/* Brand tokens. Values sampled from the logo artwork — see src/brand.ts. */
:root {
  --cb-green: #004025;
  --cb-blue: #0294fe;
  --cb-yellow: #e7cc2c;
  --cb-green-mid: #0e6131;
  --cb-green-grass: #689e07;
  --cb-sky-light: #5acbf8;
  --cb-sky: #12b4f9;

  /* Roles, so a component never reaches for a brand colour directly. */
  --cb-text: var(--cb-green);
  --cb-interactive: var(--cb-blue);
  --cb-accent: var(--cb-yellow);
  --cb-surface: #ffffff;
  --cb-surface-inverse: var(--cb-green);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cb-text: #ffffff;
    --cb-surface: #0b2018;
    --cb-surface-inverse: #ffffff;
  }
}