/* =====================================================================
   THE PLATFORM: THEME
   ---------------------------------------------------------------------
   This one file controls the look of every page: fonts, text sizes,
   colours (light + dark), game screens, medals, charts, corners, shadows.
   Every page loads it first, and css/style.css only uses the names below,
   so changing a value here changes it everywhere.

   Quick recipes
     Bigger text everywhere ........ --text-scale: 1.1;
     New brand colour .............. --brand (+ --brand-hover, --brand-soft)
     New fonts ..................... change the @import link AND --font-display / --font-body
     Rounder / squarer corners ..... --radius, --radius-sm, --radius-lg
     Answer tile colours ........... --a … --f (and --a-ink … --f-ink: the text on each tile)
   Player avatar colours are listed with the name choices in js/config.js.

   THEMES: three looks, each person can pick one (account menu › Theme) and an admin sets the
   default for everyone (Admin portal › Settings). js/theme.js applies the choice before a page is drawn.
     Snowy Owl .......... section 11: light, from the PowerPoint theme colours. THE DEFAULT for everyone
     Night Owl .......... section 12: dark, from the same PowerPoint theme colours
     Classic ............ sections 3–9 (light) + 10 (dark, when the device is in dark mode)
     A new theme ........ copy section 11 or 12, give it a new data-theme name, and add it to
                          TP.THEMES in js/theme.js. Set every colour: nothing is inherited from Classic.
   ===================================================================== */

/* ---- 1. FONTS: the Google Fonts link (https://fonts.google.com) */
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Figtree:wght@400;500;600;700;800&display=swap");

:root,
[data-theme-preview="classic"] {   /* data-theme-preview: small previews of a theme (theme choosers) */
  /* ---- Font families */
  --font-display: "Baloo 2", ui-rounded, "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif; /* headings + game screens */
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;          /* all other text */
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;                                /* question IDs, codes */

  /* ---- 2. TEXT SIZES */
  --text-scale: 1;               /* 1 = normal. 1.1 makes ALL text 10% bigger, 0.95 a little smaller */
  --line-height: 1.55;
  --fw-normal: 400;
  --fw-bold: 700;
  --fw-heavy: 800;
  --fs-tiny: .78rem;
  --fs-small: .875rem;
  --fs-body: 1rem;
  --fs-lead: 1.1rem;              /* intro paragraph under page titles */
  --fs-h1: clamp(1.8rem, 3.2vw, 2.5rem);
  --fs-h2: clamp(1.3rem, 2.2vw, 1.7rem);
  --fs-h3: 1.15rem;
  --fs-hero: clamp(2rem, 4.6vw, 3.5rem);                 /* home page headline */
  /* projector (host) screens */
  --fs-game-question: clamp(1.25rem, 2.9vw, 2.45rem);
  --fs-game-answer: clamp(1rem, 2vw, 1.6rem);
  --fs-game-pin: clamp(3rem, 8vw, 6.2rem);
  --fs-game-title: clamp(2rem, 4.4vw, 3.4rem);           /* "Leaderboard", "And the winners are…" */
  /* student phones */
  --fs-phone-question: clamp(1.05rem, 4.4vw, 1.35rem);
  --fs-phone-answer: clamp(1rem, 4.2vw, 1.35rem);
  --fs-phone-title: clamp(2rem, 8vw, 3rem);

  /* ---- 3. BRAND */
  --brand: #1f3fb8;              /* buttons, links, selected items */
  --brand-hover: #18329a;
  --brand-ink: #ffffff;          /* text on brand-coloured buttons */
  --brand-soft: #e5eafb;         /* light brand tint (selected rows, badges) */
  --accent: #ffc233;             /* saffron: main game buttons, highlights */
  --accent-hover: #ffb400;
  --accent-ink: #231a00;
  --focus: #ffb400;              /* keyboard focus ring */
  --link: var(--brand);          /* text links */
  --logo-bg: var(--brand);       /* the ◆ logo box in the top bar */
  --logo-ink: var(--accent);

  /* ---- 4. PAGES (light theme; the dark theme is further down) */
  --paper: #f4f6fc;              /* page background */
  --surface: #ffffff;            /* cards */
  --surface-2: #eceff9;          /* subtle fills: table headers, chips */
  --ink: #141a36;                /* main text */
  --ink-2: #394068;              /* secondary text */
  --muted: #636b8e;              /* hints, labels */
  --line: #dce0ee;               /* borders */

  /* ---- 5. MEANING (success / problem / warning) */
  --ok: #148a58;
  --ok-soft: #ddf4e9;
  --bad: #d3343b;
  --bad-soft: #fde5e6;
  --warn: #a86b0c;
  --warn-soft: #fcf0d6;
  --on-color: #ffffff;           /* text on coloured tiles and buttons */

  /* ---- 6. ANSWER COLOURS: tiles 1–6 (▲ ◆ ● ■ ★ ⬢). Also used by the floating shapes and confetti. */
  --a: #e5484d;
  --b: #2f6fe4;
  --c: #d69700;
  --d: #1b9a68;
  --e: #8455f0;
  --f: #ec7424;
  /* text and symbols on each tile */
  --a-ink: var(--on-color); --b-ink: var(--on-color); --c-ink: var(--on-color);
  --d-ink: var(--on-color); --e-ink: var(--on-color); --f-ink: var(--on-color);

  /* ---- 7. GAME STAGE (projector + phones). The same in light and dark mode. */
  --stage: #0f1b4d;
  --stage-deep: #0a1236;
  --stage-glow: #2a44a8;
  --stage-grid: rgba(255, 255, 255, .055);   /* graph-paper lines */
  --stage-ink: #ffffff;
  --stage-soft: #c9d2f6;         /* softer text on the stage */
  --stage-muted: #b9c3ee;        /* hints on the stage */
  --stage-chip: rgba(255, 255, 255, .12);    /* small buttons / chips on the stage */
  --stage-overlay: rgba(10, 18, 54, .6);     /* behind the 3-2-1 countdown */
  --stage-shade: rgba(0, 0, 0, .18);         /* band behind the top bar on phones */
  --stage-accent: var(--accent);             /* highlighted text on the stage: PIN, "Why?", numbers */
  --stage-edge: transparent;                 /* outline of the home page banner (needed when it matches the page) */
  --card: #ffffff;               /* white cards on the stage (question, join box, leaderboard rows) */
  --card-ink: #141a36;
  --card-ink-2: #394068;
  --card-muted: #636b8e;
  --card-soft: #eef1fa;
  --card-soft-hover: #e2e7f6;
  --card-line: #d7dcee;
  --card-ok: #148a58;            /* "+500" points and the ✓ on white cards */
  --correct-glow: #7ff0bd;
  --streak: #ec7424;
  --streak-flame: #ffcf5a;
  --urgent-ink: #ffd0d1;         /* timer digits in the last 5 seconds */
  --kick-hover: #ffe1e1;         /* hovering a player to remove them */
  --leader-row: #fff4cf;         /* first place row */
  /* full-screen result on phones */
  --result-good-1: #2bc585;  --result-good-2: #13804f;
  --result-bad-1: #f0555b;   --result-bad-2: #a51f2a;
  --result-none-1: #56608f;  --result-none-2: #2b3363;
  --result-ink: #ffffff;         /* text on those screens (always dark colours) */
  /* medals and podium */
  --gold-1: #ffe27a;   --gold-2: #f2b400;
  --silver-1: #f1f4fb; --silver-2: #b8c1d9;
  --bronze-1: #f5cba6; --bronze-2: #d98a4e;
  --medal-other-1: #8ea2ff; --medal-other-2: #4a61d6;
  --medal-ink: #3b2a00;

  /* ---- 8. CHARTS (Insights, reports) */
  --viz-bar: #2a78d6;
  --viz-track: #eceff9;
  --viz-target: #636b8e;         /* dashed 60% target line */
  --status-critical: #d03b3b;
  --status-warning: #e0a100;
  --status-good: #0ca30c;
  /* heat scale for "% correct", 9 steps: red (low) → grey (around the 60% target) → blue (high) */
  --heat-1: #c23f3f;  --heat-1-ink: #ffffff;   /*  0–24% */
  --heat-2: #dc6564;  --heat-2-ink: #ffffff;   /* 25–39% */
  --heat-3: #eea3a2;  --heat-3-ink: #1b2033;   /* 40–49% */
  --heat-4: #f7d8d7;  --heat-4-ink: #1b2033;   /* 50–56% */
  --heat-5: #eeede9;  --heat-5-ink: #1b2033;   /* 57–62% (target) */
  --heat-6: #dce9fb;  --heat-6-ink: #1b2033;   /* 63–74% */
  --heat-7: #b7d3f6;  --heat-7-ink: #1b2033;   /* 75–84% */
  --heat-8: #6da7ec;  --heat-8-ink: #0b1a33;   /* 85–94% */
  --heat-9: #2a78d6;  --heat-9-ink: #ffffff;   /* 95–100% */

  /* ---- 9. SHAPE, DEPTH, LAYOUT */
  --radius: 16px;                /* cards */
  --radius-sm: 10px;             /* inputs, small boxes */
  --radius-lg: 22px;             /* big game cards */
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(20, 26, 54, .06), 0 8px 24px rgba(20, 26, 54, .07);
  --shadow-lg: 0 18px 50px rgba(8, 14, 45, .28);
  --page-width: 1240px;
  --gutter: clamp(16px, 3vw, 32px);

  color-scheme: light;
}

/* ---- 10. CLASSIC, DARK: normal pages when the device is in dark mode.
   Keep the two blocks below identical: the first follows the device setting (Classic only: a page
   with any data-theme keeps that theme's own colours), the second is used for data-theme="dark". */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper: #0b1030;
    --surface: #131a3e;
    --surface-2: #1a2250;
    --ink: #eceffb;
    --ink-2: #c8cde8;
    --muted: #9aa2c8;
    --line: #28305f;
    --brand: #7090ff;
    --brand-hover: #8aa4ff;
    --brand-ink: #0b1030;
    --brand-soft: #1d2863;
    --ok: #3dcf8f;
    --ok-soft: #113628;
    --bad: #ff6f74;
    --bad-soft: #3c1820;
    --warn: #f2b84b;
    --warn-soft: #382c10;
    --viz-bar: #3987e5;
    --viz-track: #1f2756;
    --viz-target: #9aa2c8;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0b1030;
  --surface: #131a3e;
  --surface-2: #1a2250;
  --ink: #eceffb;
  --ink-2: #c8cde8;
  --muted: #9aa2c8;
  --line: #28305f;
  --brand: #7090ff;
  --brand-hover: #8aa4ff;
  --brand-ink: #0b1030;
  --brand-soft: #1d2863;
  --ok: #3dcf8f;
  --ok-soft: #113628;
  --bad: #ff6f74;
  --bad-soft: #3c1820;
  --warn: #f2b84b;
  --warn-soft: #382c10;
  --viz-bar: #3987e5;
  --viz-track: #1f2756;
  --viz-target: #9aa2c8;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

/* =====================================================================
   11. SNOWY OWL (light, the default) and 12. NIGHT OWL (dark)
   Made from a PowerPoint theme's colours, so a quiz on a slide matches the presentation:
     Dark 1 #000000 · Light 1 #FFFFFF · Dark 2 #0E2841 (navy) · Light 2 #E8E8E8 (grey)
     Accent 1 #E08A4E (orange) · Accent 2 #8CBFE0 (sky) · Accent 3 #5A8D70 (sage)
     Accent 4 #EDD991 (sand) · Accent 5 #455860 (slate) · Accent 6 #8A1A1F (maroon)
     Hyperlink #0563C1 · Followed hyperlink #954F72
   Every colour is one of these or one of PowerPoint's own "Lighter / Darker" steps of it (the rows
   under each colour in PowerPoint's colour picker), named in the comment. Text colours were checked
   against their backgrounds: at least 4.5 : 1 for text (WCAG AA), 3 : 1 for large numbers and icons.
   Snowy Owl: light grey pages, navy text and buttons, orange for the main game buttons; the game stage
   is light too, like a slide with a light background. Night Owl: navy pages and stage, sky buttons, sand
   highlights. Both keep white question cards on the stage, for projectors.
   ===================================================================== */

:root[data-theme="snowy-owl"],
[data-theme-preview="snowy-owl"] {
  /* brand */
  --brand: #0E2841;          /* Dark 2 */
  --brand-hover: #163E64;    /* Dark 2, lighter 10% */
  --brand-ink: #FFFFFF;      /* Light 1 */
  --brand-soft: #E8F2F9;     /* Accent 2, lighter 80% */
  --link: #0563C1;           /* Hyperlink */
  --accent: #E08A4E;         /* Accent 1 */
  --accent-hover: #DC7C39;   /* Accent 1, darker 8% */
  --accent-ink: #0E2841;     /* Dark 2 */
  --focus: #0563C1;          /* Hyperlink */
  --logo-bg: #0E2841;        /* Dark 2 */
  --logo-ink: #E08A4E;       /* Accent 1 */
  /* pages */
  --paper: #E8E8E8;          /* Light 2 */
  --surface: #FFFFFF;        /* Light 1 */
  --surface-2: #F1F1F1;      /* Light 2, lighter 40% */
  --ink: #0E2841;            /* Dark 2 */
  --ink-2: #455860;          /* Accent 5 */
  --muted: #536A74;          /* Accent 5, lighter 10% */
  --line: #D7DFE2;           /* Accent 5, lighter 80% */
  /* meaning */
  --ok: #446A54;             /* Accent 3, darker 25% */
  --ok-soft: #DDE9E2;        /* Accent 3, lighter 80% */
  --bad: #8A1A1F;            /* Accent 6 */
  --bad-soft: #F7D3D5;       /* Accent 6, lighter 85% */
  --warn: #A4551D;           /* Accent 1, darker 36% */
  --warn-soft: #F8F0D3;      /* Accent 4, lighter 60% */
  --on-color: #FFFFFF;       /* Light 1 */
  /* answer tiles (colour + text on it) */
  --a: #8A1A1F;              /* Accent 6 */
  --a-ink: #FFFFFF;          /* Light 1 */
  --b: #0563C1;              /* Hyperlink */
  --b-ink: #FFFFFF;          /* Light 1 */
  --c: #E08A4E;              /* Accent 1 */
  --c-ink: #0E2841;          /* Dark 2 */
  --d: #528066;              /* Accent 3, darker 9% */
  --d-ink: #FFFFFF;          /* Light 1 */
  --e: #455860;              /* Accent 5 */
  --e-ink: #FFFFFF;          /* Light 1 */
  --f: #954F72;              /* Followed hyperlink */
  --f-ink: #FFFFFF;          /* Light 1 */
  /* game stage */
  --stage: #E8E8E8;          /* Light 2 */
  --stage-deep: #E3E8EB;     /* Accent 5, lighter 86% */
  --stage-glow: #FFFFFF;     /* Light 1 */
  --stage-grid: rgba(14, 40, 65, .05);
  --stage-ink: #0E2841;      /* Dark 2 */
  --stage-soft: #455860;     /* Accent 5 */
  --stage-muted: #536A74;    /* Accent 5, lighter 10% */
  --stage-chip: rgba(14, 40, 65, .08);
  --stage-shade: rgba(14, 40, 65, .05);
  --stage-overlay: rgba(232, 232, 232, .82);
  --stage-accent: #9F521C;   /* Accent 1, darker 38% */
  --stage-edge: #AFBFC5;     /* Accent 5, lighter 60% */
  --card: #FFFFFF;           /* Light 1 */
  --card-ink: #0E2841;       /* Dark 2 */
  --card-ink-2: #455860;     /* Accent 5 */
  --card-muted: #536A74;     /* Accent 5, lighter 10% */
  --card-soft: #F1F1F1;      /* Light 2, lighter 40% */
  --card-soft-hover: #E8E8E8; /* Light 2 */
  --card-line: #D7DFE2;      /* Accent 5, lighter 80% */
  --card-ok: #446A54;        /* Accent 3, darker 25% */
  --correct-glow: #446A54;   /* Accent 3, darker 25% */
  --streak: #B45C20;         /* Accent 1, darker 30% */
  --streak-flame: #EDD991;   /* Accent 4 */
  --urgent-ink: #8A1A1F;     /* Accent 6 */
  --kick-hover: #F4C5C7;     /* Accent 6, lighter 80% */
  --leader-row: #F8F0D3;     /* Accent 4, lighter 60% */
  /* results on phones, medals */
  --result-good-1: #507D64;  /* Accent 3, darker 11% */
  --result-good-2: #2D4638;  /* Accent 3, darker 50% */
  --result-bad-1: #A71F26;   /* Accent 6, lighter 10% */
  --result-bad-2: #450D0F;   /* Accent 6, darker 50% */
  --result-none-1: #455860;  /* Accent 5 */
  --result-none-2: #222C30;  /* Accent 5, darker 50% */
  --result-ink: #FFFFFF;     /* Light 1 */
  --gold-1: #F4E8BD;         /* Accent 4, lighter 40% */
  --gold-2: #E0BD3F;         /* Accent 4, darker 25% */
  --silver-1: #FAFAFA;       /* Light 2, lighter 80% */
  --silver-2: #AEAEAE;       /* Light 2, darker 25% */
  --bronze-1: #ECB995;       /* Accent 1, lighter 40% */
  --bronze-2: #C16322;       /* Accent 1, darker 25% */
  --medal-other-1: #4497CD;  /* Accent 2, darker 25% */
  --medal-other-2: #27668F;  /* Accent 2, darker 50% */
  --medal-ink: #0E2841;      /* Dark 2 */
  /* charts and the heat scale */
  --viz-bar: #4497CD;        /* Accent 2, darker 25% */
  --viz-track: #E8E8E8;      /* Light 2 */
  --viz-target: #455860;     /* Accent 5 */
  --status-critical: #8A1A1F; /* Accent 6 */
  --status-warning: #C16322; /* Accent 1, darker 25% */
  --status-good: #5A8D70;    /* Accent 3 */
  --heat-1: #8A1A1F;         /* Accent 6 */
  --heat-1-ink: #FFFFFF;     /* Light 1 */
  --heat-2: #C4252C;         /* Accent 6, lighter 20% */
  --heat-2-ink: #FFFFFF;     /* Light 1 */
  --heat-3: #E98B8F;         /* Accent 6, lighter 60% */
  --heat-3-ink: #0E2841;     /* Dark 2 */
  --heat-4: #F4C5C7;         /* Accent 6, lighter 80% */
  --heat-4-ink: #0E2841;     /* Dark 2 */
  --heat-5: #E8E8E8;         /* Light 2 */
  --heat-5-ink: #0E2841;     /* Dark 2 */
  --heat-6: #D1E5F3;         /* Accent 2, lighter 60% */
  --heat-6-ink: #0E2841;     /* Dark 2 */
  --heat-7: #8CBFE0;         /* Accent 2 */
  --heat-7-ink: #0E2841;     /* Dark 2 */
  --heat-8: #4497CD;         /* Accent 2, darker 25% */
  --heat-8-ink: #0E2841;     /* Dark 2 */
  --heat-9: #27668F;         /* Accent 2, darker 50% */
  --heat-9-ink: #FFFFFF;     /* Light 1 */
  /* depth */
  --shadow: 0 1px 2px rgba(14, 40, 65, .06), 0 8px 24px rgba(14, 40, 65, .08);
  --shadow-lg: 0 18px 50px rgba(14, 40, 65, .22);
  color-scheme: light;
}

/* ---- 12. NIGHT OWL */
:root[data-theme="night-owl"],
[data-theme-preview="night-owl"] {
  /* brand */
  --brand: #8CBFE0;          /* Accent 2 */
  --brand-hover: #BAD9EC;    /* Accent 2, lighter 40% */
  --brand-ink: #0E2841;      /* Dark 2 */
  --brand-soft: #2A4964;     /* Dark 2 + 22% Accent 2 */
  --link: #8CBFE0;           /* Accent 2 */
  --accent: #E08A4E;         /* Accent 1 */
  --accent-hover: #E59C69;   /* Accent 1, lighter 15% */
  --accent-ink: #0E2841;     /* Dark 2 */
  --focus: #EDD991;          /* Accent 4 */
  --logo-bg: #E08A4E;        /* Accent 1 */
  --logo-ink: #0E2841;       /* Dark 2 */
  /* pages */
  --paper: #0E2841;          /* Dark 2 */
  --surface: #18344E;        /* Dark 2 + 8% Accent 2 */
  --surface-2: #22405A;      /* Dark 2 + 16% Accent 2 */
  --ink: #F4F7FA;            /* Light 1, softened */
  --ink-2: #D1E5F3;          /* Accent 2, lighter 60% */
  --muted: #A5B7BE;          /* Accent 5, lighter 55% */
  --line: #2F4F6A;           /* Dark 2 + 26% Accent 2 */
  /* meaning */
  --ok: #99BEA9;             /* Accent 3, lighter 40% */
  --ok-soft: #25464F;        /* Dark 2 + 30% Accent 3 */
  --bad: #E98B8F;            /* Accent 6, lighter 60% */
  --bad-soft: #3D2334;       /* Dark 2 + 38% Accent 6 */
  --warn: #EDD991;           /* Accent 4 */
  --warn-soft: #3B4B51;      /* Dark 2 + 20% Accent 4 */
  --on-color: #0E2841;       /* Dark 2 */
  /* answer tiles (colour + text on it) */
  --a: #C4252C;              /* Accent 6, lighter 20% */
  --a-ink: #FFFFFF;          /* Light 1 */
  --b: #8CBFE0;              /* Accent 2 */
  --b-ink: #0E2841;          /* Dark 2 */
  --c: #EDD991;              /* Accent 4 */
  --c-ink: #0E2841;          /* Dark 2 */
  --d: #77A88C;              /* Accent 3, lighter 20% */
  --d-ink: #0E2841;          /* Dark 2 */
  --e: #879EA8;              /* Accent 5, lighter 40% */
  --e-ink: #0E2841;          /* Dark 2 */
  --f: #E08A4E;              /* Accent 1 */
  --f-ink: #0E2841;          /* Dark 2 */
  /* game stage */
  --stage: #0E2841;          /* Dark 2 */
  --stage-deep: #0B1E31;     /* Dark 2, darker 25% */
  --stage-glow: #194976;     /* Dark 2, lighter 15% */
  --stage-grid: rgba(255, 255, 255, .05);
  --stage-ink: #FFFFFF;      /* Light 1 */
  --stage-soft: #D1E5F3;     /* Accent 2, lighter 60% */
  --stage-muted: #BAD9EC;    /* Accent 2, lighter 40% */
  --stage-chip: rgba(255, 255, 255, .1);
  --stage-shade: rgba(0, 0, 0, .2);
  --stage-overlay: rgba(7, 20, 32, .62);
  --stage-accent: #EDD991;   /* Accent 4 */
  --stage-edge: #2F4F6A;     /* Dark 2 + 26% Accent 2 */
  --card: #FFFFFF;           /* Light 1 */
  --card-ink: #0E2841;       /* Dark 2 */
  --card-ink-2: #455860;     /* Accent 5 */
  --card-muted: #536A74;     /* Accent 5, lighter 10% */
  --card-soft: #F1F1F1;      /* Light 2, lighter 40% */
  --card-soft-hover: #E8E8E8; /* Light 2 */
  --card-line: #D7DFE2;      /* Accent 5, lighter 80% */
  --card-ok: #446A54;        /* Accent 3, darker 25% */
  --correct-glow: #99BEA9;   /* Accent 3, lighter 40% */
  --streak: #B45C20;         /* Accent 1, darker 30% */
  --streak-flame: #EDD991;   /* Accent 4 */
  --urgent-ink: #E98B8F;     /* Accent 6, lighter 60% */
  --kick-hover: #F4C5C7;     /* Accent 6, lighter 80% */
  --leader-row: #F8F0D3;     /* Accent 4, lighter 60% */
  /* results on phones, medals */
  --result-good-1: #507D64;  /* Accent 3, darker 11% */
  --result-good-2: #2D4638;  /* Accent 3, darker 50% */
  --result-bad-1: #A71F26;   /* Accent 6, lighter 10% */
  --result-bad-2: #450D0F;   /* Accent 6, darker 50% */
  --result-none-1: #455860;  /* Accent 5 */
  --result-none-2: #222C30;  /* Accent 5, darker 50% */
  --result-ink: #FFFFFF;     /* Light 1 */
  --gold-1: #F4E8BD;         /* Accent 4, lighter 40% */
  --gold-2: #E0BD3F;         /* Accent 4, darker 25% */
  --silver-1: #FAFAFA;       /* Light 2, lighter 80% */
  --silver-2: #AEAEAE;       /* Light 2, darker 25% */
  --bronze-1: #ECB995;       /* Accent 1, lighter 40% */
  --bronze-2: #C16322;       /* Accent 1, darker 25% */
  --medal-other-1: #BAD9EC;  /* Accent 2, lighter 40% */
  --medal-other-2: #8CBFE0;  /* Accent 2 */
  --medal-ink: #0E2841;      /* Dark 2 */
  /* charts and the heat scale */
  --viz-bar: #8CBFE0;        /* Accent 2 */
  --viz-track: #22405A;      /* Dark 2 + 16% Accent 2 */
  --viz-target: #BAD9EC;     /* Accent 2, lighter 40% */
  --status-critical: #E98B8F; /* Accent 6, lighter 60% */
  --status-warning: #EDD991; /* Accent 4 */
  --status-good: #99BEA9;    /* Accent 3, lighter 40% */
  --heat-1: #8A1A1F;         /* Accent 6 */
  --heat-1-ink: #FFFFFF;     /* Light 1 */
  --heat-2: #C4252C;         /* Accent 6, lighter 20% */
  --heat-2-ink: #FFFFFF;     /* Light 1 */
  --heat-3: #E98B8F;         /* Accent 6, lighter 60% */
  --heat-3-ink: #0E2841;     /* Dark 2 */
  --heat-4: #F4C5C7;         /* Accent 6, lighter 80% */
  --heat-4-ink: #0E2841;     /* Dark 2 */
  --heat-5: #E8E8E8;         /* Light 2 */
  --heat-5-ink: #0E2841;     /* Dark 2 */
  --heat-6: #D1E5F3;         /* Accent 2, lighter 60% */
  --heat-6-ink: #0E2841;     /* Dark 2 */
  --heat-7: #8CBFE0;         /* Accent 2 */
  --heat-7-ink: #0E2841;     /* Dark 2 */
  --heat-8: #4497CD;         /* Accent 2, darker 25% */
  --heat-8-ink: #0E2841;     /* Dark 2 */
  --heat-9: #27668F;         /* Accent 2, darker 50% */
  --heat-9-ink: #FFFFFF;     /* Light 1 */
  /* depth */
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

/* Applies --text-scale to every size in rem units. */
html { font-size: calc(100% * var(--text-scale)); }