: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';

  

  /* Shoelace theme variables */
  --sl-color-primary-50: #e6f3ff;
  --sl-color-primary-100: #cce7ff;
  --sl-color-primary-200: #99cfff;
  --sl-color-primary-300: #66b7ff;
  --sl-color-primary-400: #339fff;
  --sl-color-primary-500: #489BDC;
  --sl-color-primary-600: #0073e6;
  --sl-color-primary-700: #005cb3;
  --sl-color-primary-800: #004580;
  --sl-color-primary-900: #002e4d;

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

/* 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%, 100% auto;
  background-position: center, center top;
  background-repeat: no-repeat, no-repeat;
}

body.fade-out {
  opacity: 0;
}