/* MODULES */
@import "./modules/partners.css";
@import "./modules/team.css";
@import "./modules/features.css";
@import "./modules/contact.css";
@import "./modules/footer.css";
@import "./modules/teaser.css";
@import "./modules/story.css";
@import "./modules/header.css";
@import "./modules/section.css";
@import "./modules/hero.css";

/* PARAMS */
:root {
  --font-size: 16px;
}

@media screen and (min-width: 768px) {
  :root {
    --font-size: 18px;
  }
}

/* Light mode */
:root, [data-gui-theme="light"] {
  /* Site variables */
  --bg-color:	hsl(0, 0%, 100%);
  --text-color: hsl(0, 0%, 16%);
  --text-color-invert: hsl(0, 0%, 99%);
  --brand-color: hsl(229, 36%, 41%);
  --brand-interaction-color: hsl(229, 36%, 30%);
  --separator-color: hsl(0, 0%, 70%);
  --section-striped-bg-color: hsl(0, 0%, 97%);
  --box-shadow: 0 0 12px -4px rgba(0, 0, 0, 0.4);
  --header-height: 80px;
  --header-bg-color: hsla(0, 0%, 100%, 60%);
  --header-offset: 10px;
  --header-zindex: 2;
  /* Gentle UI library variables */
  --gui-bg-color: var(--bg-color);
  --gui-text-color: var(--text-color);
  --gui-text-color-invert: var(--text-color-invert);  
  --gui-primary-color: var(--brand-color);
  --gui-accent-color: var(--brand-color);
  --gui-primary-interaction-color: var(--brand-interaction-color);
  --gui-accent-interaction-color: var(--brand-interaction-color);
  --gui-separator-color: var(--separator-color);
  --gui-success-color-light: var(--brand-color);
  --gui-success-color-dark: var(--brand-color);
  --gui-font-size: var(--font-size);
}
  
/* Dark mode */
[data-gui-theme="dark"] {
  /* Site variables */
  --bg-color:	hsl(0, 0%, 10%);
  --text-color: hsl(0, 0%, 97%);
  --text-color-invert: hsl(0, 0%, 16%);
  --brand-color: hsl(229, 38%, 75%);
  --brand-interaction-color: hsl(229, 38%, 65%);
  --separator-color: hsl(0, 0%, 40%);
  --section-striped-bg-color: hsl(0, 0%, 14%);
  --box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.4);
  --header-bg-color: hsla(0, 0%, 20%, 70%);
  /* Gentle UI library variables */
  --gui-bg-color: var(--bg-color);
  --gui-text-color: var(--text-color);
  --gui-text-color-invert: var(--text-color-invert);
  --gui-primary-color: var(--brand-color);
  --gui-accent-color: var(--brand-color);
  --gui-primary-interaction-color: var(--brand-interaction-color);
  --gui-accent-interaction-color: var(--brand-interaction-color);
  --gui-separator-color: var(--separator-color);
}

/* External components customization */
.gui-button {
  --gui-button-border-radius: 32px;
}

.gui-button--fab {
  --gui-button-fab-size: 64px;
}

.gui-floating-widget {
  --gui-floating-widget-offset: 10px;
}

.gui-nav-trigger__SVG {
  --gui-nav-trigger-size: 50px;
}

/* UTILITIES */
.u-text-start {
  text-align: start !important;
}

.u-text-center {
  text-align: center !important;
}

.u-text-end {
  text-align: end !important;
}

.u-text-color-brand {
  color: var(--brand-color) !important;
}

.u-margin-block-start-0 {
  margin-block-start: 0 !important;
}

.u-margin-block-end-0 {
  margin-block-end: 0 !important;
}

.u-font-size-smaller {
  font-size: smaller !important;
}

.u-font-weight-bold {
  font-weight: bold !important;
}

/* GENERAL STYLES */
html {
  font-size: var(--font-size);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* skip link */
.skip-link {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  padding-inline: 1rem;
  padding-block: 1rem;
  border-radius: 8px;
  background: var(--brand-color);
  color: var(--text-color-invert);
  opacity: 0;
}

.skip-link:focus-visible {
  outline-color: var(--brand-color);
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 3px;
  opacity: 1;
  z-index: 999;
}