/* ===== App shell / bakgrunn ===== */
:root{
  /* Fallbacks hvis tokens ikke er lastet */
  --_bg: #f5f7fb;
  --_card: #ffffff;
  --_text: #0f1720;
  --_text-weak: #5b6470;
  --_border: #e5e7eb;
  --_accent: #0b5fff;
  --_accent-contrast: #ffffff;
  --_accent-weak: #e9efff;
  --_success-weak: #e9f8ef;
  --_success-strong: #0b7a3b;
  --_critical-weak: #fdecec;
  --_critical-strong: #9b1c1c;
}

/* Bruk Sheriff-tokens hvis de finnes */
body{
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  background: var(--sds-color-background, var(--_bg));
  color: var(--sds-color-text, var(--_text));
}

/* ===== Layout ===== */
.sds-container{max-width:1100px;margin-inline:auto;padding:1.25rem}
.sds-grid{display:grid}
.sds-card{
  background: var(--sds-color-surface, var(--_card));
  border: 1px solid var(--sds-color-border-subtle, var(--_border));
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
}

/* ===== Header/Nav ===== */
header{
  background: var(--sds-color-surface-raised, var(--_card));
  border-bottom: 1px solid var(--sds-color-border-subtle, var(--_border));
  backdrop-filter: saturate(1.2) blur(4px);
}
header strong{font-weight:700}

/* ===== Typografi ===== */
.sds-text-weak{color: var(--sds-color-text-weak, var(--_text-weak))}
.sds-text-strong{font-weight:600}
h1,h2,h3{letter-spacing:.2px}

/* ===== Tabeller ===== */
.sds-table{width:100%;border-collapse:separate;border-spacing:0}
.sds-table th,.sds-table td{
  padding:.625rem .75rem;
  border-bottom:1px solid var(--sds-color-border-subtle, var(--_border));
}
.sds-table th{text-align:left;font-weight:700;color:var(--sds-color-text, var(--_text))}

/* ===== Inputs ===== */
.sds-field{display:flex;flex-direction:column;gap:.375rem}
.sds-label{font-weight:600}
.sds-input{
  width:100%;
  border:1px solid var(--sds-color-border, var(--_border));
  border-radius:.75rem;
  padding:.625rem .75rem;
  background: var(--sds-color-surface, var(--_card));
  color: var(--sds-color-text, var(--_text));
}
.sds-input:focus{outline:2px solid var(--sds-color-accent-300, var(--_accent-weak)); outline-offset:2px}

/* ===== Knappestiler ===== */
.sds-button{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.625rem 1rem; border-radius:.75rem; text-decoration:none; border:1px solid transparent;
  transition: transform .04s ease, box-shadow .12s ease, background .12s ease, color .12s ease, border-color .12s ease;
}

/* Primary */
.sds-button--primary{
  background: var(--sds-color-accent-600, var(--_accent));
  color: var(--sds-color-on-accent, var(--_accent-contrast));
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.sds-button--primary:hover{filter:brightness(1.05)}
.sds-button--primary:active{transform: translateY(1px)}

/* Secondary – mer tydelig enn helt transparent */
.sds-button--secondary{
  background: var(--sds-color-surface, var(--_card));
  border-color: var(--sds-color-border, var(--_border));
  color: var(--sds-color-text, var(--_text));
}
.sds-button--secondary:hover{background: var(--sds-color-surface-hover, #fafbff)}

/* Tertiary */
.sds-button--tertiary{
  background: transparent;
  color: var(--sds-color-text-weak, var(--_text-weak));
}
.sds-button--tertiary:hover{color: var(--sds-color-text, var(--_text))}

/* Badges */
.sds-badge{display:inline-block;border-radius:999px;padding:.125rem .5rem;font-size:.8rem}
.sds-badge--info{
  background: var(--sds-color-accent-100, var(--_accent-weak));
  color: var(--sds-color-accent-900, #0a2d6a);
}
.sds-badge--success{
  background: var(--sds-color-success-100, var(--_success-weak));
  color: var(--sds-color-success-800, var(--_success-strong));
}

/* Alerts */
.sds-alert{padding:.75rem 1rem;border-radius:.75rem}
.sds-alert--critical{
  background: var(--sds-color-critical-50, var(--_critical-weak));
  color: var(--sds-color-critical-900, var(--_critical-strong));
  border:1px solid var(--sds-color-critical-200, #f7c8c8);
}

/* Små spacing utilities for konsistens hvis Sheriff util ikke er aktiv */
.sds-mt-2{margin-top:.5rem}
.sds-p-6{padding:1.25rem}
.sds-rounded-xl{border-radius:1rem}

/* ===== Mørk modus (automatisk) ===== */
@media (prefers-color-scheme: dark){
  :root{
    --_bg: #0f1115;
    --_card: #141821;
    --_text: #e7eaf0;
    --_text-weak: #b4bbca;
    --_border: #242a36;
    --_accent: #7aa2ff;
    --_accent-contrast: #0b1220;
    --_accent-weak: #21304d;
    --_success-weak: #14261c;
    --_success-strong: #66d39a;
    --_critical-weak: #2a1414;
    --_critical-strong: #ff9b9b;
  }
  header{background: var(--sds-color-surface-raised, var(--_card))}
  .sds-button--secondary:hover{background: #1a2130}
}