@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

:root {
  /* Original theme name: Sublime-ctsu */
  /* Original SCSS colors:
     $label-primary: #335484;
     $text-details: #011e41;
     $theme-color: #011e41;
     $theme-color-semi-trans: #e82000;
     $theme-button-color: #fe5000;
     $link-color: #011e41;
     $success-color: #1e874b;
     $danger-color: #e22e1c;
     $warning-color: #a66908;
     $info-color: #217cba;
     $site-header-color: #002147; /* Oxford Blue */
     $site-header-font-color: #ffffff;
     $site-header-font-color-hover: #fe5000;
     $feature-color: #f2efeb;
     $anchor-font-color-hover: #011e41;

     $border-radius: 3px;

     $h1-font-size: 50px;
     $h2-font-size: 37px;
     $h3-font-size: 28px;
     $h4-font-size: 21px;
     $h5-font-size: 16px;
     $h6-font-size: 13px;
  */

  /* === Primary Color Palette (Oxford Blue - #002147 / #011e41) === */
  --color-primary: #011e41;
  --color-primary-100: #e6f1ff;
  --color-primary-200: #b4d5fe;
  --color-primary-300: #81b9fd;
  --color-primary-400: #4f9efc;
  --color-primary-500: #1d82fc;
  --color-primary-600: #0368e2;
  --color-primary-700: #002147; /* Oxford Blue anchor */
  --color-primary-800: #001836;
  --color-primary-900: #000e22;

  /* === Success Color Palette (#1e874b) === */
  --color-success: #1e874b;
  --color-success-100: #eafaf1;
  --color-success-200: #c0f1d5;
  --color-success-300: #97e8b9;
  --color-success-400: #6ddf9e;
  --color-success-500: #43d582;
  --color-success-600: #2abc68;
  --color-success-700: #209251;
  --color-success-800: #17683a;
  --color-success-900: #0e3f23;

  /* === Danger Color Palette (#e22e1c) === */
  --color-danger: #e22e1c;
  --color-danger-100: #fceae8;
  --color-danger-200: #f7c0bb;
  --color-danger-300: #f1978e;
  --color-danger-400: #eb6d60;
  --color-danger-500: #e64333;
  --color-danger-600: #cc2a19;
  --color-danger-700: #9f2014;
  --color-danger-800: #71170e;
  --color-danger-900: #440e08;

  /* === Warning Color Palette (#a66908) === */
  --color-warning: #a66908;
  --color-warning-100: #fef5e7;
  --color-warning-200: #fbe1b6;
  --color-warning-300: #f9cc85;
  --color-warning-400: #f7b855;
  --color-warning-500: #f4a424;
  --color-warning-600: #db8a0b;
  --color-warning-700: #aa6c08;
  --color-warning-800: #7a4d06;
  --color-warning-900: #492e04;

  /* === Info Color Palette (#217cba) === */
  --color-info: #217cba;
  --color-info-100: #e9f4fb;
  --color-info-200: #bedef3;
  --color-info-300: #93c8ec;
  --color-info-400: #67b2e4;
  --color-info-500: #3c9bdc;
  --color-info-600: #2382c3;
  --color-info-700: #1b6598;
  --color-info-800: #13486c;
  --color-info-900: #0c2b41;

  /* === Mapped Theme Variables === */
  --label-primary: #335484;
  --text-details: #011e41;
  --heading-color: var(--color-primary);
  --theme-button-color: #fe5000;
  --link-color: var(--color-primary);
  --link-color-hover: #ce490c;

  /* Site Header / Toolbar Config */
  --site-header-color: var(--color-primary-700);
  --site-header-font-color: #ffffff;
  --site-header-font-color-hover: #ce490c;
  --feature-color: #f2efeb;

  /* === Typography Stacks === */
  --header-font-family: "Mulish", helvetica, arial, sans-serif;
  --subheader-font-family: "Mulish", helvetica, arial, sans-serif;
  --body-font-family: arial, sans-serif;

  /* === Layout & Font Sizes === */
  --border-radius: 3px;
  --h1-font-size: 50px;
  --h2-font-size: 37px;
  --h3-font-size: 28px;
  --h4-font-size: 21px;
  --h5-font-size: 16px;
  --h6-font-size: 13px;
}

/* Base Body Styles */
body {
  font-family: var(--body-font-family);
  color: var(--text-details);
}

/* Headings Typography */
h1, h2, h3, h4, h5, h6,
.mce-content-body h1, .mce-content-body h2, .mce-content-body h3 {
  font-family: var(--header-font-family);
  color: var(--heading-color);
}

h1 { font-size: var(--h1-font-size); }
h2 { font-size: var(--h2-font-size); }
h3 { font-size: var(--h3-font-size); }
h4 { font-size: var(--h4-font-size); }
h5 { font-size: var(--h5-font-size); }
h6 { font-size: var(--h6-font-size); }