:root {
--primary-100: 219, 231, 238;
--primary-200: 207, 223, 232;
--primary-300: 171, 199, 214;
--primary-400: 65, 196, 247;
--primary-500: 63, 126, 162;
--primary-600: 255, 151, 123;
--primary-700: 255, 190, 130;
--primary-800: 10, 61, 90;
--primary-900: 8, 47, 70;

    --success-100: 209, 250, 229;
    --success-200: 165, 243, 207;
    --success-300: 110, 231, 183;
    --success-400: 54, 211, 153;
    --success-500: 16, 183, 127;
    --success-600: 5, 148, 103;
    --success-700: 4, 119, 86;
    --success-800: 6, 96, 70;
    --success-900: 6, 76, 57;

    --danger-100: 255, 229, 231;
    --danger-200: 254, 205, 211;
    --danger-300: 253, 165, 175;
    --danger-400: 251, 111, 132;
    --danger-500: 244, 62, 92;
    --danger-600: 226, 29, 72;
    --danger-700: 191, 18, 61;
    --danger-800: 161, 18, 58;
    --danger-900: 134, 19, 54;

    --info-100: 225, 243, 254;
    --info-200: 186, 229, 253;
    --info-300: 126, 212, 252;
    --info-400: 58, 191, 248;
    --info-500: 13, 162, 231;
    --info-600: 2, 132, 197;
    --info-700: 3, 105, 160;
    --info-800: 7, 87, 131;
    --info-900: 12, 74, 110;

    --warning-100: 255, 251, 235;
    --warning-200: 254, 243, 200;
    --warning-300: 253, 230, 139;
    --warning-400: 252, 212, 79;
    --warning-500: 251, 189, 35;
    --warning-600: 245, 159, 10;
    --warning-700: 219, 119, 6;
    --warning-800: 179, 83, 9;
    --warning-900: 145, 64, 13;
}


/* =====================================================================
   SITE PALETTE - edit these to recolour the whole skin
   ===================================================================== */
:root {
  /* surfaces */
  --bg:          #131722;  /* page background */
  --surface:     #1e2536;  /* cards, panels, inputs */
  --border:      #334155;

  /* text */
  --text:        #f3f4f7;  /* starlight */
  --text-soft:   #d2d5df;  /* ghost-gray */
  --muted:       #9ea5ba;  /* light-gray */

  /* accents */
  --accent:      #37a6d1;  /* blue: headings, links, meta text */
  --accent-hi:   #41c4f7;  /* bright-blue: hover, gradients */
  --cta:         #ff6753;  /* light-orange-red: buttons, highlights */
  --cta-soft:    #ff977b;  /* pale-orange-red */
  --on-cta:      #111419;  /* text that sits on cta / accent buttons */
  --purple:      #41c4f7;  /* focus and hover accent */
  --orange:      #ff977b;
  --upcoming:    #ff977b;  /* "upcoming" mission bar */

  /* dropdowns (chosen / select2) */
  --menu-bg:     #1c3c55;  /* dark-blue */
  --menu-hover:  #2f3749;  /* dark-gray */
  --menu-soft:   #9ea5ba;  /* light-gray */
  --lavender:    #f3f4f7;  /* starlight */

  /* table rows */
  --row-alt:     #202632;
  --row-hover:   #2f3749;
  --row-odd:     #2f3749;
  --row-even:    #283043;

  /* misc greys */
  --slate:       #52596e;  /* medium-dark-gray */
  --slate-open:  #52596e;
  --grey-green:  #6d748c;  /* primary-gray */

  /* white-on-dark overlays (lines and fills) */
  --line:        rgb(255 255 255 / 0.15);
  --line-soft:   rgb(255 255 255 / 0.12);
  --fill:        rgb(255 255 255 / 0.08);
  --fill-soft:   rgb(255 255 255 / 0.05);

  /* makes a dark logo white; set to "none" on a light theme */
  --logo-filter: brightness(0) invert(1);
}


/* =====================================================================
   LIGHT THEME - applied when <html data-theme="light">
   ===================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:          #f3f4f7;  /* starlight */
  --surface:     #e3e5eb;
  --border:      #d2d5df;  /* ghost-gray */

  --text:        #1c3c55;  /* dark-blue */
  --text-soft:   #2f3749;  /* dark-gray */
  --muted:       #52596e;  /* medium-dark-gray */

  --accent:      #bb311a;  /* deep orange-red: headings, meta text, nav */
  --accent-hi:   #e7442a;  /* orange-red: hovers, join banner */
  --cta:         #bb311a;  /* deep orange-red */
  --cta-soft:    #ff977b;  /* pale-orange-red */
  --on-cta:      #f3f4f7;
  --purple:      #2a7193;  /* medium-dark-blue: focus and hover accent */
  --orange:      #bb311a;
  --upcoming:    #2a7193;
  --primary-400: 42, 113, 147;  /* medium-dark-blue, for focus rings */
  --primary-600: 37, 106, 138;  /* links: blue #256a8a */

  --menu-bg:     #f3f4f7;  /* starlight */
  --menu-hover:  #d2d5df;  /* ghost-gray */
  --menu-soft:   #52596e;  /* medium-dark-gray */
  --lavender:    #1c3c55;  /* dark-blue */

  --row-alt:     #ebedf2;
  --row-hover:   #dcdfe8;
  --row-odd:     #e1e4ec;
  --row-even:    #e8eaf1;

  --slate:       #6d748c;  /* primary-gray */
  --slate-open:  #9ea5ba;  /* light-gray */
  --grey-green:  #6d748c;  /* primary-gray */

  --line:        rgb(0 0 0 / 0.12);
  --line-soft:   rgb(0 0 0 / 0.10);
  --fill:        rgb(0 0 0 / 0.06);
  --fill-soft:   rgb(0 0 0 / 0.04);

  --logo-filter: none;
}