/*
 * theme.css — every themeable value lives here. Nothing outside this file
 * should contain a raw hex code, font name, or brand string. To re-skin
 * this tool for a client, replace this file (and brand.js + the logo asset
 * in assets/) — styles.css, app.js, and functions/ never need to change.
 *
 * Currently mirrors Robson Fletcher Data, Strategy & Storytelling's site
 * (see ../website_redesign/site/src/styles/global.css and
 * ../website_redesign/Colour_palette_and_fonts.txt).
 */

:root {
  /* --- brand palette --- */
  --color-charcoal:  #2F2F2F;
  --color-offwhite:  #F7F7F9;
  --color-lightblue: #A7C7E7;
  --color-medblue:   #4C5FA9;
  --color-navy:      #1F3C88;

  --color-text:        var(--color-charcoal);
  --color-bg:           var(--color-offwhite);
  --color-accent:        var(--color-medblue);
  --color-accent-dark:    var(--color-navy);
  --color-accent-light:    var(--color-lightblue);

  /* --- simulator series colors (validated pair, see dataviz skill checks) ---
   * Red for remain (Canada) / blue for separation — the colours people
   * actually associate with each side. This blue is a distinct azure, not
   * the brand's own navy/med-blue above and not UCP's shade of blue. */
  --color-remain:      #C81E3A;   /* red */
  --color-separation:   #0074D9;   /* azure, CVD-checked against the red */

  --color-surface:      #FFFFFF;
  --color-border:       rgba(47, 47, 47, 0.14);

  /* --- type --- */
  --font-heading: "Merriweather", Georgia, serif;
  --font-body:     "Lato", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:      "Courier New", monospace;

  /* --- layout --- */
  --max-width: 72rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;

  --radius: 0.35rem;
}