/**
 * Color tokens of the better pages
 *
 * The brand color is a hue and a chroma (--brand-h, --brand-c, set by theme.js), the light and dark schemes are
 * derived from it in OKLCH. The corner radius of the buttons and the boxes comes from --radius-button and --radius-card.
 * Everything else uses these tokens, so a theme change only has to change them.
 */
:root {
  --brand-h: 255;
  --brand-c: 0.17;
  --radius-button: 0.75rem;
  --radius-card: 1rem;

  --bg: oklch(0.99 0.004 var(--brand-h));
  --surface: oklch(1 0 0);
  --surface-muted: oklch(0.97 0.006 var(--brand-h));
  --border: oklch(0.9 0.01 var(--brand-h));
  --text: oklch(0.22 0.015 var(--brand-h));
  --muted: oklch(0.5 0.02 var(--brand-h));
  --primary: oklch(0.54 var(--brand-c) var(--brand-h));
  --primary-subtle: oklch(0.95 0.04 var(--brand-h));
  --on-primary: oklch(0.99 0 0);
  /* The upload meter uses a hue shifted from the brand */
  --secondary: oklch(0.58 var(--brand-c) calc(var(--brand-h) + 150));
  --danger: #ff3030;
  --danger-border: #ff6060;
  --great: #2ecc71;
  --good: #27ae60;
  --poor: #e67e22;
  --bad: #e74c3c;
  --meter-track: #80808040;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(0.17 0.012 var(--brand-h));
  --surface: oklch(0.21 0.014 var(--brand-h));
  --surface-muted: oklch(0.25 0.014 var(--brand-h));
  --border: oklch(0.31 0.016 var(--brand-h));
  --text: oklch(0.94 0.008 var(--brand-h));
  --muted: oklch(0.72 0.02 var(--brand-h));
  --primary: oklch(0.62 var(--brand-c) var(--brand-h));
  --primary-subtle: oklch(0.3 0.06 var(--brand-h));
  --secondary: oklch(0.68 var(--brand-c) calc(var(--brand-h) + 150));
}