/* Kingdom 1810 design tokens: the one place the site's colours, fonts and sizes are set.
   Neutral gray design. Colour only comes from things that mean something: the section you are in, an event's type,
   an alliance, a player, photos and icons. Every page uses these variables and never a literal colour.
   Theme: /assets/theme.js (loaded in <head>) sets data-theme="light"|"dark" on <html> before the page draws.
   Without JavaScript the device's setting is used (prefers-color-scheme). Section accents: data-sec on <html>.
   Admin-edited section colours and event-type colours are layered on top by /api/theme.css (same variable names). */
:root{
  --f-display:Manrope,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-body:"DM Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-mono:var(--f-display); /* numbers that must line up: Manrope with tabular figures */

  /* text size: A- / A / A+ (member setting). Everything scales from --fs. */
  --fs:1;

  /* light */
  --bg:#F7F7F7; --surface:#FFFFFF; --raised:#EEEEEE; --line:#E2E2E2;
  --fg:#1A1A1A; --muted:#666666;
  --chip:#EEEEEE; --chip-ink:#333333;
  --ok:#3F7D5E; --warn:#8A6116; --err:#B4533E;
  --photo-bg:#2A2A2A; --on-photo:#FFFFFF;   /* behind and on top of hero photos: always the same, in both themes */
  --shade:rgba(0,0,0,.45);   /* dimming layer for photos and pop-up backdrops */
  --img-dim:1;               /* photo brightness (dark mode dims photos a little) */

  /* section accents (light / dark pairs live below); --accent is the one for the page you are on */
  --acc-home:#2F7D73; --acc-kvk:#A83A3A; --acc-events:#3E6FB0; --acc-nap:#3F7D5E; --acc-transfers:#5B6B7B; --acc-mod:#1A1A1A;
  --accent:var(--acc-home);
  --accent-ink:#FFFFFF;      /* text on a filled accent: white, or #161616 when that reads better (set automatically) */

  /* event types (admins edit these; /api/theme.css adds one --et-<id> per type) */
  --et-kvk:#A83A3A; --et-pve:#B7791F; --et-pvp:#7A55B0; --et-capped:#3E6FB0; --et-growth:#3F7D5E; --et-kingdom:#5B6B7B;
  --ev:var(--accent);        /* the colour of the event you are looking at; falls back to the section colour */
  --ev-ink:var(--accent-ink);

  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#161616; --surface:#202020; --raised:#2A2A2A; --line:#353535; --fg:#EDEDED; --muted:#A0A0A0;
    --chip:#2E2E2E; --chip-ink:#D0D0D0; --ok:#7BB89A; --warn:#D9A85B; --err:#E08B78; --shade:rgba(0,0,0,.6); --img-dim:.85;
    --acc-home:#6CC3B6; --acc-kvk:#E58A86; --acc-events:#86ABE6; --acc-nap:#7FC29F; --acc-transfers:#A3B4C6; --acc-mod:#EDEDED;
    --accent-ink:#161616;
    --et-kvk:#E58A86; --et-pve:#E3AE5C; --et-pvp:#B497E8; --et-capped:#86ABE6; --et-growth:#7FC29F; --et-kingdom:#A3B4C6;
    color-scheme:dark;
  }
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{
  --bg:#161616; --surface:#202020; --raised:#2A2A2A; --line:#353535; --fg:#EDEDED; --muted:#A0A0A0;
  --chip:#2E2E2E; --chip-ink:#D0D0D0; --ok:#7BB89A; --warn:#D9A85B; --err:#E08B78; --shade:rgba(0,0,0,.6); --img-dim:.85;
  --acc-home:#6CC3B6; --acc-kvk:#E58A86; --acc-events:#86ABE6; --acc-nap:#7FC29F; --acc-transfers:#A3B4C6; --acc-mod:#EDEDED;
  --accent-ink:#161616;
  --et-kvk:#E58A86; --et-pve:#E3AE5C; --et-pvp:#B497E8; --et-capped:#86ABE6; --et-growth:#7FC29F; --et-kingdom:#A3B4C6;
  color-scheme:dark;
}

/* the section you are in picks the accent */
:root[data-sec="home"]{--accent:var(--acc-home)}
:root[data-sec="kvk"]{--accent:var(--acc-kvk)}
:root[data-sec="events"]{--accent:var(--acc-events)}
:root[data-sec="nap"]{--accent:var(--acc-nap)}
:root[data-sec="transfers"]{--accent:var(--acc-transfers)}
:root[data-sec="mod"]{--accent:var(--acc-mod)}

/* ---- derived names: the older names every page already uses, now pointing at the new tokens ---- */
:root{
  --sunk:var(--raised);
  --gold:var(--accent);            /* small accent text: section labels, links */
  --brand-gold:var(--accent);      /* thin lines, focus rings */
  --on-cat:var(--accent-ink);
  --ok-bg:color-mix(in srgb,var(--ok) 5%,var(--surface));
  --warn-bg:color-mix(in srgb,var(--warn) 10%,var(--surface));
  --err-bg:color-mix(in srgb,var(--err) 6%,var(--surface));
  --acc-bg:color-mix(in srgb,var(--accent) 6%,var(--surface));
  /* old brand names: forest and gold are gone. Filled things use the accent; text on them uses --accent-ink. */
  --k-forest:var(--accent); --k-gold:var(--accent); --k-ivory:var(--accent-ink); --k-stone:var(--line); --k-charcoal:var(--fg);
  /* old calendar category colours: neutral now. Events take their colour from their event type (--et-*). */
  --c-alliance:var(--muted); --c-events:var(--muted); --c-deals:var(--muted); --c-finder:var(--muted); --c-fish:var(--muted); --c-bucc:var(--muted); --c-temple:var(--muted); --c-other:var(--muted);
}
html[data-textsize="s"]{--fs:.94}
html[data-textsize="l"]{--fs:1.12}