/* ====================================================================
   SERVICERING · Brand / Design System
   --------------------------------------------------------------------
   Én sentral kilde til sannhet for farger, typografi, spacing, skygger,
   radii og gjenbrukbare komponenter på tvers av plattformen.

   Bruk:
     <link rel="stylesheet" href="../shared/brand.css">  (eller riktig sti)

   Importér dette FØRST i kaskaden, så modul-spesifikk CSS kan overstyre
   selektivt der det trengs.
   ==================================================================== */

:root {
  /* ============ FARGEPALETT ============ */

  /* Primær — Vendingservice / Norvend rosa */
  --sr-vending:        #c4517a;
  --sr-vending-2:      #9d3a5e;
  --sr-vending-soft:   #f9e3ec;
  --sr-vending-ink:    #6b1f3d;

  /* Sekundær — Matservice / terracotta */
  --sr-matter:         #c4724a;
  --sr-matter-2:       #a35a36;
  --sr-matter-soft:    #f6e4d8;
  --sr-matter-ink:     #6b3c1d;

  /* Tertiær — Renhold / navy blue */
  --sr-renhold:        #1e3a5f;
  --sr-renhold-2:      #13284a;
  --sr-renhold-soft:   #dee5ee;
  --sr-renhold-ink:    #0f2440;

  /* Aliaser — for bakoverkompabilitet med eksisterende kode */
  --sr-brand:          var(--sr-vending);
  --sr-brand-2:        var(--sr-vending-2);
  --sr-brand-soft:     var(--sr-vending-soft);
  --sr-accent:         var(--sr-matter);

  /* Nøytraler — varm jordtone */
  --sr-ink:            #1a1f24;
  --sr-ink-2:          #525c69;
  --sr-ink-3:          #8b95a3;
  --sr-bg:             #faf7f2;
  --sr-card:           #ffffff;
  --sr-line:           #ebe4d8;
  --sr-line-strong:    #d6cdb9;

  /* Status — dempede toner som matcher jordpaletten */
  --sr-ok:             #4a7a5e;
  --sr-ok-soft:        #dceee0;
  --sr-warn:           #c98a3f;
  --sr-warn-soft:      #fdecd0;
  --sr-err:            #c44a4a;
  --sr-err-soft:       #fbe0e0;
  --sr-info:           #4a6b8a;
  --sr-info-soft:      #dee8f0;

  /* ============ TYPOGRAFI ============ */

  --sr-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Inter", "Segoe UI", system-ui, sans-serif;
  --sr-font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* Skalering — basert på 1.250x type-scale */
  --sr-text-xs:    11px;
  --sr-text-sm:    12.5px;
  --sr-text-base:  14px;
  --sr-text-md:    16px;
  --sr-text-lg:    18px;
  --sr-text-xl:    22px;
  --sr-text-2xl:   28px;
  --sr-text-3xl:   36px;
  --sr-text-4xl:   48px;

  /* ============ SPACING (4px-grid) ============ */
  --sr-1:  4px;
  --sr-2:  8px;
  --sr-3:  12px;
  --sr-4:  16px;
  --sr-5:  20px;
  --sr-6:  24px;
  --sr-8:  32px;
  --sr-10: 40px;
  --sr-12: 48px;
  --sr-16: 64px;

  /* ============ RADIER ============ */
  --sr-r-sm:   6px;
  --sr-r-md:   10px;
  --sr-r-lg:   14px;
  --sr-r-xl:   18px;
  --sr-r-pill: 999px;

  /* ============ SKYGGER ============ */
  --sr-shadow-sm:  0 1px 2px rgba(26, 31, 36, .06),
                   0 1px 1px rgba(26, 31, 36, .04);
  --sr-shadow-md:  0 4px 12px rgba(26, 31, 36, .08),
                   0 2px 4px rgba(26, 31, 36, .04);
  --sr-shadow-lg:  0 12px 32px -8px rgba(26, 31, 36, .15),
                   0 4px 12px -4px rgba(26, 31, 36, .08);
  --sr-shadow-xl:  0 24px 60px -12px rgba(26, 31, 36, .22),
                   0 8px 18px -6px rgba(26, 31, 36, .10);
  --sr-shadow-focus: 0 0 0 3px rgba(196, 81, 122, .18);

  /* ============ TRANSISJONER ============ */
  --sr-transition:    .18s ease-out;
  --sr-transition-md: .25s cubic-bezier(.22, .61, .36, 1);
  --sr-transition-lg: .35s cubic-bezier(.22, .61, .36, 1);

  /* ============ Z-INDEX-SKALA ============ */
  --sr-z-nav:    50;
  --sr-z-modal:  1000;
  --sr-z-toast:  9000;
  --sr-z-debug:  9999;
}

/* ====================================================================
   GLOBALE BASE-STYLES
   ==================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--sr-font);
  color: var(--sr-ink);
  background: var(--sr-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  letter-spacing: -.012em;
  line-height: 1.18;
  color: var(--sr-ink);
}
h1 { font-size: clamp(28px, 5vw, var(--sr-text-4xl)); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: clamp(22px, 4vw, var(--sr-text-3xl)); font-weight: 800; letter-spacing: -.02em; }
h3 { font-size: var(--sr-text-xl); font-weight: 700; }
h4 { font-size: var(--sr-text-lg); font-weight: 700; }
h5 { font-size: var(--sr-text-md); font-weight: 600; }
h6 { font-size: var(--sr-text-base); font-weight: 600; }

p { margin: 0 0 var(--sr-3); color: var(--sr-ink-2); }
small { font-size: var(--sr-text-sm); color: var(--sr-ink-3); }

a {
  color: var(--sr-vending);
  text-decoration: none;
}
a:hover { color: var(--sr-vending-2); text-decoration: underline; }

/* ====================================================================
   KOMPONENTER
   ==================================================================== */

/* ------------ Knapper ------------ */
.sr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sr-2);
  padding: 12px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--sr-r-md);
  font-family: inherit;
  font-size: var(--sr-text-base);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--sr-transition);
  min-height: 44px;             /* WCAG touch target */
  box-sizing: border-box;
}
.sr-btn:active { transform: scale(.985); }
.sr-btn:focus-visible { outline: none; box-shadow: var(--sr-shadow-focus); }
.sr-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Varianter */
.sr-btn--primary {
  background: var(--sr-vending); color: #fff;
}
.sr-btn--primary:hover:not(:disabled) { background: var(--sr-vending-2); }

.sr-btn--secondary {
  background: var(--sr-matter); color: #fff;
}
.sr-btn--secondary:hover:not(:disabled) { background: var(--sr-matter-2); }

.sr-btn--ghost {
  background: var(--sr-card); color: var(--sr-ink);
  border-color: var(--sr-line);
}
.sr-btn--ghost:hover:not(:disabled) { border-color: var(--sr-vending); color: var(--sr-vending); }

.sr-btn--danger {
  background: var(--sr-err); color: #fff;
}
.sr-btn--danger:hover:not(:disabled) { background: #a83a3a; }

.sr-btn--success {
  background: var(--sr-ok); color: #fff;
}
.sr-btn--success:hover:not(:disabled) { background: #3d6750; }

/* Størrelser */
.sr-btn--sm { padding: 8px 14px; font-size: var(--sr-text-sm); min-height: 36px; }
.sr-btn--lg { padding: 16px 28px; font-size: var(--sr-text-md); min-height: 52px; }
.sr-btn--block { width: 100%; }

/* ------------ Inputs ------------ */
.sr-input,
.sr-textarea,
.sr-select {
  display: block;
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: var(--sr-text-md);          /* 16px → forhindrer iOS-zoom */
  color: var(--sr-ink);
  background: var(--sr-card);
  border: 1.5px solid var(--sr-line);
  border-radius: var(--sr-r-md);
  transition: border-color var(--sr-transition), box-shadow var(--sr-transition);
}
.sr-input:focus,
.sr-textarea:focus,
.sr-select:focus {
  outline: none;
  border-color: var(--sr-vending);
  box-shadow: var(--sr-shadow-focus);
}
.sr-textarea { min-height: 80px; resize: vertical; }

.sr-label {
  display: block;
  font-size: var(--sr-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sr-ink-2);
  margin-bottom: var(--sr-2);
}

/* ------------ Kort ------------ */
.sr-card {
  background: var(--sr-card);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-r-lg);
  padding: var(--sr-5);
}
.sr-card--floating { border: none; box-shadow: var(--sr-shadow-md); }
.sr-card--interactive {
  cursor: pointer;
  transition: transform var(--sr-transition), box-shadow var(--sr-transition);
}
.sr-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--sr-shadow-lg); }

/* ------------ Badges ------------ */
.sr-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--sr-text-xs);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-radius: var(--sr-r-pill);
  background: rgba(26, 31, 36, .06);
  color: var(--sr-ink-2);
}
.sr-badge--vending { background: var(--sr-vending-soft); color: var(--sr-vending-ink); }
.sr-badge--matter  { background: var(--sr-matter-soft);  color: var(--sr-matter-ink); }
.sr-badge--renhold { background: var(--sr-renhold-soft); color: var(--sr-renhold-ink); }
.sr-badge--ok      { background: var(--sr-ok-soft);      color: var(--sr-ok); }
.sr-badge--warn    { background: var(--sr-warn-soft);    color: #885f29; }
.sr-badge--err     { background: var(--sr-err-soft);     color: var(--sr-err); }
.sr-badge--info    { background: var(--sr-info-soft);    color: var(--sr-info); }

/* ------------ Banner / alert ------------ */
.sr-banner {
  display: flex; gap: var(--sr-3);
  padding: var(--sr-3) var(--sr-4);
  border-radius: var(--sr-r-md);
  font-size: var(--sr-text-base);
  background: var(--sr-info-soft);
  color: var(--sr-info);
  border-left: 4px solid var(--sr-info);
}
.sr-banner--ok   { background: var(--sr-ok-soft);   color: var(--sr-ok);   border-left-color: var(--sr-ok); }
.sr-banner--warn { background: var(--sr-warn-soft); color: #885f29;        border-left-color: var(--sr-warn); }
.sr-banner--err  { background: var(--sr-err-soft);  color: var(--sr-err);  border-left-color: var(--sr-err); }

/* ------------ Chip ------------ */
.sr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: var(--sr-text-sm);
  font-weight: 600;
  background: var(--sr-card);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-r-pill);
  color: var(--sr-ink);
  cursor: pointer;
  transition: all var(--sr-transition);
}
.sr-chip:hover { border-color: var(--sr-vending); color: var(--sr-vending); }
.sr-chip--active {
  background: var(--sr-vending);
  border-color: var(--sr-vending);
  color: #fff;
}

/* ------------ Stat-kort ------------ */
.sr-stat {
  background: var(--sr-card);
  border: 1px solid var(--sr-line);
  border-radius: var(--sr-r-md);
  padding: var(--sr-3) var(--sr-4);
  text-align: center;
}
.sr-stat__v {
  font-size: var(--sr-text-2xl);
  font-weight: 800;
  line-height: 1;
  color: var(--sr-vending);
  font-variant-numeric: tabular-nums;
}
.sr-stat__l {
  font-size: var(--sr-text-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sr-ink-2);
  margin-top: 4px;
}

/* ------------ Logo ------------ */
.sr-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sr-2);
  font-weight: 800;
  font-size: var(--sr-text-md);
  letter-spacing: -.01em;
  color: var(--sr-ink);
  text-decoration: none;
}
.sr-logo__mark {
  display: inline-flex;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  border-radius: 7px;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--sr-vending), var(--sr-matter));
  letter-spacing: 0;
}
.sr-logo__dots {
  display: inline-flex; gap: -3px;
}
.sr-logo__dot1 {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sr-vending); display: inline-block;
}
.sr-logo__dot2 {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sr-matter); display: inline-block;
  margin-left: -3px;
}

/* ------------ Modul-stripe (topp av side, viser hvilken modul du er i) ------------ */
.sr-modul-stripe {
  height: 3px;
  background: linear-gradient(90deg, var(--sr-vending), var(--sr-matter));
}
.sr-modul-stripe--vending { background: var(--sr-vending); }
.sr-modul-stripe--matter  { background: var(--sr-matter); }

/* ------------ Skille-streker ------------ */
.sr-divider {
  height: 1px;
  background: var(--sr-line);
  margin: var(--sr-5) 0;
}
.sr-divider--dashed { background: transparent; border-top: 1px dashed var(--sr-line); height: 0; }

/* ------------ Touch-utvidelse for små klikk-områder ------------ */
@media (pointer: coarse) {
  .sr-touch-target { min-height: 44px; min-width: 44px; }
}

/* ====================================================================
   UTILITIES — hold antallet lav, dette er ikke Tailwind
   ==================================================================== */

.sr-mt-2 { margin-top: var(--sr-2); }
.sr-mt-3 { margin-top: var(--sr-3); }
.sr-mt-4 { margin-top: var(--sr-4); }
.sr-mt-5 { margin-top: var(--sr-5); }
.sr-mb-2 { margin-bottom: var(--sr-2); }
.sr-mb-3 { margin-bottom: var(--sr-3); }
.sr-mb-4 { margin-bottom: var(--sr-4); }
.sr-text-center { text-align: center; }
.sr-text-right  { text-align: right; }
.sr-flex { display: flex; gap: var(--sr-3); align-items: center; }
.sr-flex--column { flex-direction: column; align-items: stretch; }
.sr-flex-1 { flex: 1; }
.sr-gap-2 { gap: var(--sr-2); }
.sr-gap-3 { gap: var(--sr-3); }
.sr-gap-4 { gap: var(--sr-4); }