/* Design tokens: every colour, font, radius and shadow the styles use, in one place. Light and dark both complete:
   the system's choice by default, the theme button overrides it (data-theme on <html>, remembered in localStorage).
   The palette is FusionFixHub's (FusionFixHub-App/docs/design-vector.md): page = the hub's content panel, alt =
   its chrome, card/raised = its cards and controls. Change a value here and every page, the media cards and the
   community pages follow. Load order: tokens.css, site.css, preview-viewer.css, community.css. */
/* The fonts, served from this site (src/assets/fonts, written by tools/fonts.mjs from the official releases; SIL Open
   Font License): Inter Regular and SemiBold, JetBrains Mono Regular and SemiBold. Weights in between take the nearer
   file; bold takes SemiBold. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 500; font-display: swap; src: url("../fonts/inter-400.woff") format("woff"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/inter-600.woff") format("woff"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 500; font-display: swap; src: url("../fonts/jetbrains-mono-400.woff") format("woff"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600 900; font-display: swap; src: url("../fonts/jetbrains-mono-600.woff") format("woff"); }

:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r-sm: 6px; --r: 9px; --r-lg: 12px; --r-xl: 16px; --pill: 999px;
  --wrap: 1200px; --header: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Light (the default when the system is light, or picked with the button): a cool grey-blue page under white cards,
   so the cards, the covers and the art stand off it */
:root, :root[data-theme="light"] {
  --bg: #ECEFF6; --bg-alt: #E4E8F1; --surface: #F4F6FA; --card: #FFFFFF; --raised: #FFFFFF;
  --border: #D9DEE9; --border-strong: #C3CAD9; --hover: #E3E7F0;
  --text: #0B0B0F; --text2: #4A4D58; --muted: #5A5D69;
  --accent: #2857E0; --accent2: #5B3FD6; --on-accent: #FFFFFF; --accent-soft: #E1E9FE;
  --ok: #116B33; --warn: #8A5206; --bad: #DC2626;
  --glow: rgb(47 98 240 / .14); --glow2: rgb(91 63 214 / .12);
  --shadow-sm: 0 1px 2px rgb(16 16 24 / .06);
  --shadow: 0 1px 2px rgb(16 16 24 / .05), 0 4px 14px -4px rgb(16 16 24 / .08);
  --shadow-lg: 0 2px 4px rgb(16 16 24 / .04), 0 24px 48px -16px rgb(16 16 24 / .18);
  --code: #F6F7FB; --cfg-comment: #5A5D69; --cfg-section: #2857E0; --cfg-value: #5B3FD6;
  --header-bg: rgb(236 239 246 / .8);
  color-scheme: light;
}

/* Dark: the same values three times (system dark without a choice, the button's dark, panels over game art) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09090B; --bg-alt: #0C0C0F; --surface: #111114; --card: #111114; --raised: #18181C;
    --border: #27272D; --border-strong: #34343A; --hover: #1F1F24;
    --text: #EDEDF0; --text2: #A1A1AA; --muted: #8A8A94;
    --accent: #5B8CFF; --accent2: #8B7BFF; --on-accent: #05070D; --accent-soft: #141B2E;
    --ok: #34D399; --warn: #FBBF24; --bad: #F87171;
    --glow: rgb(91 140 255 / .2); --glow2: rgb(139 123 255 / .16);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
    --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 6px 18px -6px rgb(0 0 0 / .5);
    --shadow-lg: 0 2px 4px rgb(0 0 0 / .3), 0 28px 56px -18px rgb(0 0 0 / .7);
    --code: #0D0D10; --cfg-comment: #8A8A94; --cfg-section: #5B8CFF; --cfg-value: #8B7BFF;
    --header-bg: rgb(9 9 11 / .74);
    color-scheme: dark;
  }
}
:root[data-theme="dark"], .on-art {
  --bg: #09090B; --bg-alt: #0C0C0F; --surface: #111114; --card: #111114; --raised: #18181C;
  --border: #27272D; --border-strong: #34343A; --hover: #1F1F24;
  --text: #EDEDF0; --text2: #A1A1AA; --muted: #8A8A94;
  --accent: #5B8CFF; --accent2: #8B7BFF; --on-accent: #05070D; --accent-soft: #141B2E;
  --ok: #34D399; --warn: #FBBF24; --bad: #F87171;
  --glow: rgb(91 140 255 / .2); --glow2: rgb(139 123 255 / .16);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
  --shadow: 0 1px 2px rgb(0 0 0 / .35), 0 6px 18px -6px rgb(0 0 0 / .5);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / .3), 0 28px 56px -18px rgb(0 0 0 / .7);
  --code: #0D0D10; --cfg-comment: #8A8A94; --cfg-section: #5B8CFF; --cfg-value: #8B7BFF;
  --header-bg: rgb(9 9 11 / .74);
  color-scheme: dark;
}
/* Panels over game art keep the dark tokens in both themes */
.on-art { color: var(--text); }

/* Media cards (preview-viewer.css): the overlay on the pictures is dark in both themes */
:root {
  --ov-bg: rgb(9 9 11 / .62); --ov-line: rgb(255 255 255 / .16); --ov-line2: rgb(255 255 255 / .18);
  --ov-text: #EDEDF0; --ov-text2: #C9C9D1; --ov-muted: #A1A1AA; --ov-warn: #FBBF24;
  --ov-panel: rgb(9 9 11 / .7); --ov-raised: #26262B;
  --ov-accent: #5B8CFF; --ov-on-accent: #05070D;
}