/**
 * Swedac Design System - Base Styles
 *
 * Denna fil innehåller Swedacs grundläggande designsystem:
 * - Färgvariabler
 * - Typografi
 * - Grundläggande stilar
 *
 * Kan användas fristående eller som grund för Swedac-applikationer.
 */

:root {
  /* === FÄRGER === */

  /* Primära färger */
  --swedac-dark-blue: #162943;
  --swedac-middle-blue: #d5dce1;
  --swedac-light-blue: #e7edf0;
  --swedac-yellow: #fbba00;
  --swedac-white: #fff;

  /* Kompletterande färger */
  --swedac-search-input-bg: #445873;

  /* Navbar-variabler (mappar till Swedac-värden) */
  --navbar-dark-blue: var(--swedac-dark-blue);
  --navbar-middle-blue: var(--swedac-middle-blue);
  --navbar-light-blue: var(--swedac-light-blue);
  --navbar-yellow: var(--swedac-yellow);
  --navbar-white: var(--swedac-white);
  --navbar-font-family: var(--swedac-font-family);

  /* === TYPOGRAFI === */

  /* Primärt typsnitt */
  --swedac-font-family: "Helvetica Neue LT W01_41488878", Arial, sans-serif;

  /* Teckenstorlekar */
  --swedac-font-size-base: 1rem;
  --swedac-font-size-small: 0.9rem;
  --swedac-font-size-large: 1.2rem;

  /* === SPACING === */

  --swedac-spacing-xs: 0.25rem;
  --swedac-spacing-sm: 0.5rem;
  --swedac-spacing-md: 1rem;
  --swedac-spacing-lg: 1.5rem;
  --swedac-spacing-xl: 2rem;

  /* === BORDER RADIUS === */

  --swedac-radius-sm: 2px;
  --swedac-radius-md: 4px;
  --swedac-radius-lg: 8px;

  /* === TRANSITIONS === */

  --swedac-transition-fast: 150ms ease-in-out;
  --swedac-transition-normal: 250ms ease-in-out;
  --swedac-transition-slow: 350ms ease-in-out;

  /* === SHADOWS === */

  --swedac-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --swedac-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --swedac-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* === Z-INDEX === */

  --swedac-z-dropdown: 100;
  --swedac-z-sticky: 500;
  --swedac-z-navbar: 1000;
  --swedac-z-modal: 2000;
  --swedac-z-tooltip: 3000;
}

/* === GRUNDLÄGGANDE STILAR === */

/* Reset och grundinställningar */
.swedac-base {
  font-family: var(--swedac-font-family);
  font-size: var(--swedac-font-size-base);
  color: var(--swedac-dark-blue);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tillgänglighet - Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus styles för tillgänglighet */
.focus-visible:focus-visible {
  outline: 2px solid var(--swedac-yellow);
  outline-offset: 2px;
}

/* Respektera användarens rörelseinställningar */
@media (prefers-reduced-motion: reduce) {
  .swedac-base * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Hög kontrast-stöd */
@media (prefers-contrast: high) {
  :root {
    --swedac-dark-blue: #000;
    --swedac-white: #fff;
  }
}

/* === HJÄLPKLASSER === */

/* Textfärger */
.swedac-text-dark { color: var(--swedac-dark-blue); }
.swedac-text-white { color: var(--swedac-white); }
.swedac-text-yellow { color: var(--swedac-yellow); }

/* Bakgrundsfärger */
.swedac-bg-dark { background-color: var(--swedac-dark-blue); }
.swedac-bg-light { background-color: var(--swedac-light-blue); }
.swedac-bg-middle { background-color: var(--swedac-middle-blue); }
.swedac-bg-yellow { background-color: var(--swedac-yellow); }
.swedac-bg-white { background-color: var(--swedac-white); }

/* Typografi */
.swedac-text-sm { font-size: var(--swedac-font-size-small); }
.swedac-text-base { font-size: var(--swedac-font-size-base); }
.swedac-text-lg { font-size: var(--swedac-font-size-large); }