@import url('https://fonts.googleapis.com/css?family=PT+Sans');

:root {
  /* Original theme name: sublime tufts blue */
  /* Original SCSS colors:
     $label-primary: #428bca; (overridden by lighten($theme-color, 10))
     $text-details: #b0b5b8;
     $theme-color: #457cbf;
     $theme-color-semi-trans: #457cbf;
     $theme-button-color: #457cbf;
     $link-color: #266093;
     $success-color: #59B26C;
     $danger-color: #B23B2A;
     $warning-color: #FF7335;
     $info-color: #4fb3e5;
     $label-primary: lighten($theme-color, 10);
     $site-header-color: #fff;
     $site-header-font-color: #444;
     $site-header-font-color-hover: $link-color;

     $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;
  */

  /* Potential issues / skipped variables:
     - $feature-color / --feature-color was not provided in the original SCSS input and has been skipped.
     - $anchor-font-color-hover / --link-color-hover was not provided in the original SCSS input and has been skipped.
     - $label-primary was assigned a SCSS function (`lighten($theme-color, 10)`) rather than a valid hex code, so it was skipped.
  */

  /* === Primary Color Palette (#457cbf - Tufts Blue) === */
  --color-primary: #457cbf;
  --color-primary-100: #edf3fa;
  --color-primary-200: #cfdff2;
  --color-primary-300: #a3c3e7;
  --color-primary-400: #77a7dc;
  --color-primary-500: #5793d4;
  --color-primary-600: #457cbf;
  --color-primary-700: #336199;
  --color-primary-800: #22446d;
  --color-primary-900: #122640;

  /* === Success Color Palette (#59B26C) === */
  --color-success: #59B26C;
  --color-success-100: #eef8f0;
  --color-success-200: #d1eed8;
  --color-success-300: #a8dfb6;
  --color-success-400: #7ed094;
  --color-success-500: #59B26C;
  --color-success-600: #449755;
  --color-success-700: #327541;
  --color-success-800: #20512c;
  --color-success-900: #102e17;

  /* === Danger Color Palette (#B23B2A) === */
  --color-danger: #B23B2A;
  --color-danger-100: #f9ebe9;
  --color-danger-200: #f1ccc7;
  --color-danger-300: #e4a198;
  --color-danger-400: #d67467;
  --color-danger-500: #c84d3b;
  --color-danger-600: #B23B2A;
  --color-danger-700: #8c2b1d;
  --color-danger-800: #621c12;
  --color-danger-900: #390e08;

  /* === Warning Color Palette (#FF7335) === */
  --color-warning: #FF7335;
  --color-warning-100: #fff2eb;
  --color-warning-200: #ffdccb;
  --color-warning-300: #ffbc9e;
  --color-warning-400: #ff996e;
  --color-warning-500: #FF7335;
  --color-warning-600: #e25515;
  --color-warning-700: #b33d0a;
  --color-warning-800: #802804;
  --color-warning-900: #4d1501;

  /* === Info Color Palette (#4fb3e5) === */
  --color-info: #4fb3e5;
  --color-info-100: #eef7fc;
  --color-info-200: #d3ebf8;
  --color-info-300: #a9d8f2;
  --color-info-400: #7cc4eb;
  --color-info-500: #4fb3e5;
  --color-info-600: #2f99d1;
  --color-info-700: #2077a6;
  --color-info-800: #145377;
  --color-info-900: #0a3147;

  /* === Mapped Theme Variables === */
  --text-details: #b0b5b8;
  --heading-color: #203e58;
  --theme-button-color: var(--color-primary);
  --theme-button-color-hover: var(--color-primary-700);
  --link-color: #266093;
  --site-header-color: #fff;
  --site-header-font-color: #444;
  --site-header-font-color-hover: var(--link-color);

  /* === Typography & Layout Variables === */
  --header-font-family: "PT Sans", helvetica, arial, sans-serif;
  --subheader-font-family: "PT Sans", helvetica, arial, sans-serif;
  --body-font-family: "PT Sans", helvetica, arial, sans-serif;

  --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 Typography Styles */
body {
  font-family: var(--body-font-family);
  color: var(--text-details);
}

/* Global Heading Styles */
h1, h2, h3, h4, h5, h6,
.mce-content-body h1, 
.mce-content-body h2, 
.mce-content-body h3, 
.mce-content-body h4, 
.mce-content-body h5, 
.mce-content-body h6 {
  color: #203e58 !important;
}

h1, .mce-content-body h1 {
  font-family: var(--header-font-family);
  font-size: var(--h1-font-size);
}

h2, h3, h4, .mce-content-body h2, .mce-content-body h3, .mce-content-body h4 {
  font-family: var(--subheader-font-family);
}

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); font-family: var(--header-font-family); }
h6 { font-size: var(--h6-font-size); font-family: var(--header-font-family); }


/* Plone Toolbar Top Customization */
body.plone-toolbar-top #edit-bar #edit-zone, 
body.plone-toolbar-top #edit-bar #edit-zone .toolbar-header,
.toolbar, #toolbar {
  background-color: var(--color-primary-700) !important;
}

body.plone-toolbar-top #edit-bar #edit-zone a,
body.plone-toolbar-top #edit-bar #edit-zone span,
body.plone-toolbar-top #edit-bar #edit-zone button {
  color: #ffffff !important;
}

body.plone-toolbar-top #edit-bar #edit-zone a:hover,
body.plone-toolbar-top #edit-bar #edit-zone button:hover {
  color: var(--color-primary-200) !important;
}