/* LUG FA League design tokens. Light by day; dark from 6pm to 6am Accra time
   (data-theme="dark" on <html>, set by js/lib/theme.js and the inline script in each page). */
:root {
  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Lancaster red and white, with the black of the FA crest */
  --red-800: #8f0c13;
  --red-700: #b3121a;
  --red-600: #c8161e;
  --red-500: #d71921;   /* the red in the LUG FA crest */
  --red-400: #ff4d52;
  --black: #0d0d0e;

  --bg: #f7f5f4;
  --surface: #ffffff;
  --surface-2: #f1eded;
  --ink: #141010;
  --ink-2: #4a4141;
  --muted: #776d6d;
  --line: #e7e1e0;
  --line-strong: #d3cbca;
  --brand: var(--red-600);
  --brand-ink: #ffffff;
  --head: var(--red-600);            /* header bar */
  --hero: var(--red-700);            /* page heroes */
  --on-red: #ffffff;                 /* highlights on red backgrounds */
  --highlight: var(--red-600);       /* highlights on the page (1st place etc.) */
  --accent: #ffffff;
  --accent-ink: var(--red-700);
  --danger: #c2321f;
  --ok: #18804f;
  --win: #18804f;
  --draw: #8a8f86;
  --loss: #c2321f;
  --shadow: 0 1px 2px rgba(13, 26, 20, 0.06), 0 8px 24px -12px rgba(13, 26, 20, 0.18);

  --radius: 14px;
  --radius-sm: 9px;
  --gutter: 16px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0f0b0b;
    --surface: #191313;
    --surface-2: #231a1a;
    --ink: #f4efef;
    --ink-2: #cdbfbf;
    --muted: #9a8b8b;
    --line: #2e2323;
    --line-strong: #463535;
    --brand: var(--red-400);
    --head: var(--red-700);
    --hero: var(--red-800);
    --highlight: var(--red-400);
    --accent-ink: var(--red-700);
    --danger: #ff6a55;
    --ok: #3ccf8a;
    --win: #3ccf8a;
    --draw: #9aa49c;
    --loss: #ff6a55;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px -14px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
}
@media (min-width: 720px) { :root { --gutter: 28px; } }