@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
  /* Original theme name: sublime-aerospace */
  /* Original SCSS colors:
     $label-primary: #2b2118;
     $text-details: #2b2118;
     $theme-color: #fe5000;
     $theme-color-semi-trans: #fe5000;
     $theme-button-color: #fe5000;
     $link-color: #253c78;
     $success-color: #036d19;
     $danger-color: #89023e;
     $warning-color: #b65e28;
     $info-color: #197bbd;
     $site-header-color: #fff;
     $site-header-font-color: #212721;
     $site-header-font-color-hover: $link-color;
     $feature-color: #fdefe7;

     $border-radius: 0px;

     $h1-font-size: 50px;
     $h2-font-size: 37px;
     $h3-font-size: 28px;
     $h4-font-size: 21px;
     $h5-font-size: 16px;
     $h6-font-size: 13px;
  */

  /* Missing variables:
     - $anchor-font-color-hover / --link-color-hover was not specified in the SCSS input and has been skipped.
  */

  /* === Primary Color Palette (#fe5000) === */
  --color-primary: #fe5000;
  --color-primary-100: #ffefe6;
  --color-primary-200: #ffd6c2;
  --color-primary-300: #ffb38f;
  --color-primary-400: #ff8a52;
  --color-primary-500: #fe5000;
  --color-primary-600: #d64300;
  --color-primary-700: #a83500;
  --color-primary-800: #7a2600;
  --color-primary-900: #4d1800;

  /* === Success Color Palette (#036d19) === */
  --color-success: #036d19;
  --color-success-100: #e6f6e9;
  --color-success-200: #bfdec5;
  --color-success-300: #94c69e;
  --color-success-400: #68ad77;
  --color-success-500: #3b9550;
  --color-success-600: #036d19;
  --color-success-700: #025313;
  --color-success-800: #013a0d;
  --color-success-900: #012107;

  /* === Danger Color Palette (#89023e) === */
  --color-danger: #89023e;
  --color-danger-100: #fce6f0;
  --color-danger-200: #f5b3d0;
  --color-danger-300: #eb7fae;
  --color-danger-400: #de4a8b;
  --color-danger-500: #ce1968;
  --color-danger-600: #a2084b;
  --color-danger-700: #89023e;
  --color-danger-800: #5f012b;
  --color-danger-900: #380019;

  /* === Warning Color Palette (#b65e28) === */
  --color-warning: #b65e28;
  --color-warning-100: #fdf0e7;
  --color-warning-200: #f8d5bf;
  --color-warning-300: #f0b793;
  --color-warning-400: #e69866;
  --color-warning-500: #d97a3a;
  --color-warning-600: #b65e28;
  --color-warning-700: #8e471d;
  --color-warning-800: #653112;
  --color-warning-900: #3e1b08;

  /* === Info Color Palette (#197bbd) === */
  --color-info: #197bbd;
  --color-info-100: #e8f4fb;
  --color-info-200: #badef3;
  --color-info-300: #8bc7eb;
  --color-info-400: #5bb0e2;
  --color-info-500: #2f98d7;
  --color-info-600: #197bbd;
  --color-info-700: #115f94;
  --color-info-800: #0b446a;
  --color-info-900: #052841;

  /* === Mapped Theme Variables === */
  --label-primary: #2b2118;
  --text-details: var(--label-primary);
  --heading-color: var(--color-primary);
  --theme-button-color: var(--color-primary);
  --link-color: #253c78;
  --site-header-color: #fff;
  --site-header-font-color: #212721;
  --site-header-font-color-hover: var(--link-color);
  --feature-color: #fdefe7;

  /* === Layout & Typography Variables === */
  --header-font-family: "Mulish", helvetica, arial, sans-serif;
  --subheader-font-family: var(--header-font-family);
  --body-font-family: var(--header-font-family);

  --border-radius: 0px;
  --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);
}

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: #203e58;
}

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); }

/* Plone Toolbar Top Customization */
body.plone-toolbar-top #edit-bar #edit-zone, 
body.plone-toolbar-top #edit-bar #edit-zone .toolbar-header {
  background-color: #fe5000;
}

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;
}