/* Kyoto is a brand accent. Fixture difficulty and risk retain their own colors. */
:root {
  /* Shared semantic foundation for the website and installed PWA. Brand
     accents are deliberately separate from football-data status colours. */
  --ui-canvas: #0a0a0b;
  --ui-plane: #111113;
  --ui-surface: #26262a;
  --ui-raised: #323238;
  --ui-text: #ffffff;
  --ui-secondary: #c7c7cb;
  --ui-muted: #8a8a8e;
  --ui-border: rgb(255 255 255 / 0.13);
  --ui-accent: #22d3ee;
  --ui-focus: #22d3ee;
  --ui-radius-control: 11px;
  --ui-radius-card: 16px;
  --ui-radius-overlay: 22px;
  --ui-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-duration-quick: 120ms;
  --ui-duration-state: 200ms;
  --brand-red: #c21500;
  --brand-gold: #ffc500;
  --brand-gradient: linear-gradient(90deg, #c21500, #ffc500);
  --brand-wash: linear-gradient(90deg, rgb(194 21 0 / 0.1), rgb(255 197 0 / 0.07));
  --brand-emphasis: #ffc500;
  --brand-ink: #ffffff;
  --brand-plate: #181310;
  --brand-line: rgb(255 197 0 / 0.26);
  --brand-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root.light-mode {
  --ui-canvas: #f7f7f5;
  --ui-plane: #efefec;
  --ui-surface: #ffffff;
  --ui-raised: #e8e8e5;
  --ui-text: #101012;
  --ui-secondary: #45454a;
  --ui-muted: #69696f;
  --ui-border: rgb(10 10 11 / 0.18);
  --ui-accent: #087f91;
  --ui-focus: #087f91;
  --brand-emphasis: #a52b0b;
  --brand-wash: linear-gradient(90deg, rgb(194 21 0 / 0.07), rgb(255 197 0 / 0.1));
  --brand-line: rgb(194 21 0 / 0.22);
}