/* =========================================================
   Halp's Game Room — design tokens
   The one place sizes, colors and fonts are defined. Loaded first, on
   every page. Components live in ui.css; older page styles in styles.css.

   Rules of the house (the "75-year-old test"):
     • body text 18px; nothing smaller than --fs-min (15px at Standard)
     • anything you tap is at least --tap (48px) tall
     • the main button on a screen is --tap-lg (58px)
   ========================================================= */

/* ---- Fonts (self-hosted; see static/fonts) ---- */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/static/fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/static/fonts/atkinson-hyperlegible-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/static/fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 600 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("/static/fonts/oswald-500.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("/static/fonts/oswald-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("/static/fonts/oswald-700.woff2") format("woff2");
  font-weight: 700 900; font-style: normal; font-display: swap;
}

:root {
  /* ---- Type ---- */
  --font: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-display: "Oswald", "Arial Narrow", var(--font);

  --text-base: 18px;          /* html font-size; the Text size setting changes this */
  --fs-min:  .8334rem;        /* 15px — the floor, for labels and meta */
  --fs-sm:   .9rem;           /* 16px */
  --fs-md:   1rem;            /* 18px — body */
  --fs-lg:   1.17rem;         /* 21px */
  --fs-xl:   1.45rem;         /* 26px */
  --fs-2xl:  1.8rem;          /* 32px */
  --fs-3xl:  2.3rem;          /* 41px */

  /* Legacy names still used by older templates */
  --text-sm: var(--fs-min);
  --text-lg: var(--fs-lg);
  --text-xl: var(--fs-xl);

  /* ---- Touch ---- */
  --tap:    48px;
  --tap-lg: 58px;

  /* ---- Spacing ---- */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  40px;

  /* ---- Shape ---- */
  --card-radius: 18px;
  --btn-radius:  14px;
  --content-max: 900px;
  --bottom-nav-h: 72px;
  --nav-h: 54px;

  /* ---- Brand ---- */
  --c-primary:     #2f80ff;
  --c-primary-dk:  #1f63d6;
  --c-success:     #22a35a;
  --c-success-dk:  #1b8549;
  --c-danger:      #e5484d;
  --c-danger-dk:   #c93a3f;
  --c-warning:     #ffc107;
  --c-warning-dk:  #d39e00;
  --c-purple:      #7c3aed;
  --c-live:        #25e07a;
  --grad-brand:      linear-gradient(135deg, #1d8bff 0%, #7c3aed 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(29,139,255,.16), rgba(124,58,237,.16));

  /* ---- One color per game, carried from the tile to the page ---- */
  --g-tournament: #ff9f1c;  --g-tournament-2: #f07c00;
  --g-pool:       #2f80ff;  --g-pool-2:       #1b5fd6;
  --g-bingo:      #14b8a6;  --g-bingo-2:      #0d8f81;
  --g-quiz:       #8b5cf6;  --g-quiz-2:       #6d3fe0;
  --g-squares:    #2fd47a;  --g-squares-2:    #12a85a;
  --g-bracket:    #f4733d;  --g-bracket-2:    #d9531c;
  --g-scoregame:  #ff5d9e;  --g-scoregame-2:  #e83a86;
  --g-poll:       #a78bfa;  --g-poll-2:       #7c5cf0;
  --g-quickprop:  #f43f5e;  --g-quickprop-2:  #d11f42;
  --g-sweep:      #eab308;  --g-sweep-2:      #c48f00;
  --g-guess:      #06b6d4;  --g-guess-2:      #0891b2;
  --g-feud:       #3657d8;  --g-feud-2:       #1e3a8a;
  --g-superlative: #d946ef; --g-superlative-2: #a21caf;
  --g-season:     #65a30d;  --g-season-2:     #3f6212;

  /* ---- Surfaces: Easy-read (light) is the base; dark overrides below ---- */
  --c-bg:         #f4f1ea;
  --c-surface:    #ffffff;
  --c-surface-2:  #ece8dd;
  --c-border:     #cfc9ba;
  --c-text:       #15151c;
  --c-text-muted: #4b4b57;
  --c-on-accent:  #ffffff;
  --c-link:       #1b4fd1;
  --c-selected-bg:     #e4edff;
  --c-selected-border: #1d4ed8;
  --c-good:       #166534;    /* 6.4:1 even on the pale green "Playing now" pill */
  --c-danger-text: #b3262c;   /* red words: 6.5:1 on white (--c-danger is for fills) */
  --nav-bg:       rgba(255,255,255,.94);
  --card-shadow:       0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.06);
  --card-shadow-hover: 0 2px 4px rgba(0,0,0,.06), 0 10px 30px rgba(0,0,0,.10);
}

html[data-theme="light"] {
  --c-primary:    #1d4ed8;
  --c-primary-dk: #173fb0;
  --grad-brand:   linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
}

html[data-theme="dark"] {
  --c-bg:         #0b0b12;
  --c-surface:    #16161f;
  --c-surface-2:  #20202c;
  --c-border:     #2e2e40;
  --c-text:       #f2f2f7;
  --c-text-muted: #a3a3b5;
  --c-link:       #6fb0ff;
  --c-selected-bg:     rgba(47,128,255,.18);
  --c-selected-border: #4d95ff;
  --c-good:       #4ade80;
  --c-danger-text: #ff7b80;
  --nav-bg:       rgba(16,16,24,.92);
  --card-shadow:       0 1px 2px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.55);
  --card-shadow-hover: 0 2px 6px rgba(0,0,0,.5), 0 16px 44px rgba(0,0,0,.65);
}

/* ---- Text size setting (Me → Settings, or Help) ---- */
html[data-text-size="large"]  { --text-base: 20px; }
html[data-text-size="xlarge"] { --text-base: 22.5px; }

/* Pages that haven't been given an Easy-read treatment yet keep their dark
   look even when the viewer chose Easy-read, rather than rendering dark
   artwork on a light page. base.html adds this class for them. */
.theme-dark-scope {
  --c-bg:         #0b0b12;
  --c-surface:    #16161f;
  --c-surface-2:  #20202c;
  --c-border:     #2e2e40;
  --c-text:       #f2f2f7;
  --c-text-muted: #a3a3b5;
  --c-link:       #6fb0ff;
  --c-selected-bg:     rgba(47,128,255,.18);
  --c-selected-border: #4d95ff;
  --c-good:       #4ade80;
  --c-danger-text: #ff7b80;
}