:root {
  /* Font variables (font-family namn från fonts.css) */
  --font-logo: 'BungeeShadeRegular';
  --font-secondary: 'BungeeRegular';
  --font-text: 'DMSansRegular';

  --font-anton-sc: 'AntonSCRegular';
  --font-bayon: 'BayonRegular';
  --font-dm-sans: 'DMSansRegular';

  --theme-form-element-width: 280px;

  --tile-width-large: calc(100% - 20px);
  --tile-width-medium: calc(100% - 40px);
  --tile-width-small: calc(100vw - 60px);
  --tile-width-xsmall: calc(100vw - 80px);

}

/* Dark theme */
.sl-theme-dark {
  --theme-background-color: #404243;
  --theme-base-color: #404243;
  --theme-contrast-color: #FEFEFE;
  --theme-contrast-color-25: rgba(254, 254, 254, 0.25);
  --theme-contrast-color-50: rgba(254, 254, 254, 0.5);
  --theme-contrast-color-75: rgba(254, 254, 254, 0.75);
  --theme-accent-color: #489BDC;

  --theme-font-color: #404243;
  --theme-font-contrast-color: #FEFEFE;

  --theme-input-background-color: #FEFEFE;
  --theme-input-contrast-background-color: #404243;

  --theme-button-color: #489BDC;
  --theme-inactive-answer-button-color: #e0e0e0;
  --theme-button-font-color: #404243;
  
  --theme-border-color: #ffffff;

  --theme-card-background-color: #4C4C4C;

  /* Ljus sthlm-mönster: för hög opacitet döljer motivet helt */
  --theme-page-bg-overlay: rgba(64, 66, 67, 0.38);
  --theme-page-bg-image: url('/assets/images/sthlm.png');

  --theme-footer-new-game-background-color: #D9D9D9;
  --theme-footer-new-game-dot-color: #BBB6B6;

  --theme-footer-question-in-play-background-color: #585858;
  --theme-footer-question-in-play-dot-color: #BBB6B6;
  
}

/* Light theme */
.sl-theme-light {
  --theme-background-color: #FEFEFE;
  --theme-base-color: #FEFEFE;
  --theme-contrast-color: #404243;
  --theme-contrast-color-25: rgba(64, 66, 67, 0.25);
  --theme-contrast-color-50: rgba(64, 66, 67, 0.5);
  --theme-contrast-color-75: rgba(64, 66, 67, 0.75);

  --theme-accent-color: #489BDC;

  --theme-font-color: #404243;
  --theme-font-contrast-color: #404243;

  --theme-input-background-color: #ffffff;
  --theme-input-contrast-background-color: #FEFEFE;

  --theme-button-color: #FEFEFE;
  --theme-inactive-answer-button-color: #e0e0e0;
  --theme-button-font-color: #404243;

  --theme-border-color: #ffffff;

  --theme-footer-background-color: #707070;
  --theme-footer-dot-color: #D9D9D9;

  --theme-footer-question-in-play-background-color: #D9D9D9;
  --theme-footer-question-in-play-dot-color: #BBB6B6;

  --theme-page-bg-overlay: rgba(254, 254, 254, 0.38);
  --theme-page-bg-image: url('/assets/images/sthlm.png');
}

html {
  min-height: 100dvh;
  background-color: var(--theme-background-color);
}

body {
  position: relative;
  min-height: 100dvh;
  margin: 0;
  background: transparent;
  transition: opacity 0.5s ease-in-out;
}

/* Fast wallpaper: full bredd (100% auto); gradient fyller rutan */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--theme-background-color);
  background-image:
    linear-gradient(var(--theme-page-bg-overlay), var(--theme-page-bg-overlay)),
    var(--theme-page-bg-image);
  background-size: 100% 100%, cover;
  background-position: center, center top;
  background-repeat: no-repeat, no-repeat;
}

body.fade-out {
  opacity: 0;
}