@import './_core.css';
@import './_sparkassen-fonts.css';
@import './_sparkassen-colors.css';

:root {
  --mw-color-secondary-50: #eefaf4;
  --mw-color-secondary-100: #dcf7e9; /* Banner / table header background; */
  --mw-color-secondary-200: #bbedd4;
  --mw-color-secondary-300: #8ed4b4; /* Original Background for white icons; */
  --mw-color-secondary-400: #67ab8d; /* Darker(better) background for white icons; */
  --mw-color-secondary-500: #498168;
  --mw-color-secondary-600: #386753;
  --mw-color-secondary-700: #294e3e;
  --mw-color-secondary-800: #1a3529;
  --mw-color-secondary-900: #132a20;
  --mw-color-secondary-950: #06130;
  --mw-color-secondary-contrast-on-dark: #ffffff;
  --mw-color-secondary-contrast-on-light: #292929;

  --mw-color-secondary: var(--mw-color-secondary-300);
  --mw-color-secondary--hover: var(--mw-color-secondary-400);
  --mw-color-secondary--active: var(--mw-color-secondary-500);
  --mw-color-secondary--contrast: var(--mw-color-secondary-contrast-on-light);

  --mw-page-background-color: var(--mw-color-neutral-100);
}

[data-component='Card'] {
  --mw--card--corner-icon-color--secondary: var(
    --mw-color-secondary-contrast-on-dark
  );
  --mw--card--favorite-icon--heart--display: block;
  --mw--card--favorite-icon--star--display: none;
}

[data-component='RangeControl'] {
  --mw--range-control--thumb--background-color: var(--mw-color-neutral-950);
}

[data-component='Table'] {
  --mw--table--header-background-color: var(--mw-color-secondary);
  --mw--table--header-text-color: var(--mw-color-secondary--contrast);
  --mw--table--footer-background-color: var(--mw-color-primary);
  --mw--table--footer-text-color: var(--mw-color-primary--contrast);
}

[data-component='Accordion'] {
  --mw--accordion--headline-color--open: var(--mw-color-primary);
}

[data-component='ContactForm'] {
  --mw--form-heading-border-bottom: 1px solid var(--mw-color-neutral-500);
  --mw--form-heading-border-bottom-margin-bottom: var(--mw-space-6);
}

[data-component='MediaWithContentSection'] {
  --mw--media-with-content-section--background-color--accent: var(
    --mw-color-secondary
  );
  --mw--media-with-content-section--text-color--accent: var(
    --mw-color-secondary--contrast
  );
}

[data-component='CardsList'] {
  --mw--cards-list-block--background-color--highlight: var(
    --mw-color-secondary-50
  );
}

[data-component='ShapedHeading'] {
  --mw--shaped-heading--font-size: clamp(
    var(--mw-font-size-7),
    2.5vw,
    var(--mw-font-size-9)
  );
}