/* ============================================================================================
   ProSportsIQ style settings
   --------------------------------------------------------------------------------------------
   Change the look of the whole member site here: colours, fonts and corner rounding. Every page
   reads these values, so one edit restyles everything.

   How to edit
   - Change only the value after the colon, and keep the semicolon at the end.
   - Colours can be written as #rrggbb (e.g. #1ed0bf) or rgba(red, green, blue, opacity).
     A colour picker in any design tool or https://htmlcolorcodes.com gives these values.
   - After editing, raise the ?v= number on the theme.css line in index.html and today.html
     (e.g. ?v=20261016-1 to ?v=20261016-2), merge, and deploy, so browsers fetch the new file.
   - Keep enough contrast between text and its background so everything stays readable.

   Leave the names (the part starting with --) exactly as they are; the site looks them up.

   Brand book colours: Deep Navy #0E191E, Teal #4CC0B4, White #F6F7F4, Red #ED1C24. Red is an
   accent only (the thin line under the header, the background glow). Losses and errors keep their
   own softer red (--danger below) so a member never mistakes decoration for a loss.
   ============================================================================================ */

/* ---- Brand fonts, served from /fonts on our own site ------------------------------------------
   Rajdhani (headings) is under the SIL Open Font License (fonts/Rajdhani-OFL.txt); General Sans
   (body text) is under the ITF Free Font License from Fontshare (fonts/GeneralSans-FFL.txt), which
   allows self-hosting for our own site. Only the weights the site uses are here.               */
@font-face { font-family: "Rajdhani"; src: url("/fonts/Rajdhani-SemiBold.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("/fonts/Rajdhani-Bold.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("/fonts/GeneralSans-Variable.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* ---- Brand colours --------------------------------------------------------------------- */
  --teal: #4cc0b4;            /* Main accent: links, highlights, active tabs, chart bars      */
  --blue: #2a7a73;            /* Second accent: a deeper teal for active tabs and second bars  */
  --accent-2: #4cc0b4;        /* Kept for older rules; buttons now use --button-bg             */
  --red: #ed1c24;             /* Brand red: accent lines and glow only, never losses/errors    */
  --button-bg: #4cc0b4;       /* Main buttons: solid brand teal ...                            */
  --button-text: #0e191e;     /* ... with deep navy text                                       */

  /* ---- Backgrounds ----------------------------------------------------------------------- */
  --navy: #0e191e;            /* Page background                                               */
  --panel: #15252c;           /* Panel background                                              */
  --glow-1: #11423f;          /* Soft teal glow at the top left of the page background         */
  --glow-2: #3a1517;          /* Soft red glow at the bottom right of the page background      */
  --card-top: rgba(24, 42, 50, .96);    /* Cards fade from this colour (top left) ...           */
  --card-bottom: rgba(14, 25, 30, .96); /* ... to this colour (bottom right)                    */
  --card-border: rgba(76, 192, 180, .22); /* Card outline                                       */

  /* ---- Text -------------------------------------------------------------------------------- */
  --white: #f6f7f4;           /* Main text                                                     */
  --muted: #a9b9ba;           /* Secondary text: labels, notes, small print                    */
  --line: #263b42;            /* Divider lines between rows and sections                       */

  /* ---- Buttons, switches and dropdowns on dark backgrounds ------------------------------- */
  --control-bg: #12232a;      /* Background of switches, toggles and small controls            */
  --control-border: #35535a;  /* Their outline                                                 */
  --control-text: #d3e0df;    /* Their text                                                    */

  /* ---- Form fields (text boxes, search boxes, selects) ----------------------------------- */
  --field-border: #44626a;    /* Field outline                                                 */
  --field-text: #0e191e;      /* Text typed into a field                                       */

  /* ---- Status colours --------------------------------------------------------------------- */
  --success: #64e0b7;         /* Good news: wins, saved, confirmed                             */
  --danger: #ff8c91;          /* Problems: errors, losses                                      */
  --danger-line: #e06c6c;     /* Outline for error and "out" tags                              */
  --danger-soft: #f29a9a;     /* Text in error and "out" tags                                  */
  --warning: #f3c26b;         /* Caution: injury tags, pending items                           */
  --warning-line: #d9a441;    /* Outline for caution tags                                      */

  /* ---- Fonts --------------------------------------------------------------------------------
     The brand fonts are loaded at the top of this file from /fonts. Another font must be added
     there the same way (the site only loads fonts from its own server).                         */
  --font-body: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Rajdhani", "General Sans", ui-sans-serif, system-ui, sans-serif;

  /* ---- Corner rounding (0px is square; bigger numbers are rounder) ------------------------- */
  --radius-card: 22px;        /* Cards and panels                                              */
  --radius-card-phone: 17px;  /* Cards on phones                                               */
  --radius-button: 10px;      /* Buttons                                                       */
}