/*
 * Grundkomponenter. Använder BARA variabler från tokens.css - inga färgvärden här.
 * Layout: bento-rutnät som standard. Allt innehåll ligger i rutor (.ruta) i ett
 * 12-kolumners rutnät (.bento) med samma mellanrum och hörnradie överallt.
 */
[hidden] { display: none !important; }       /* även element vars klass sätter display */

:root {
  --typsnitt-rubrik: "Archivo", system-ui, sans-serif;
  --typsnitt-text: "IBM Plex Sans", system-ui, sans-serif;
  --typsnitt-nummer: "IBM Plex Mono", ui-monospace, monospace;
  --radie-ruta: 16px;
  --radie-kontroll: 10px;
  --radie-bricka: 999px;
  --bento-mellanrum: 16px;
  --ruta-inre: 22px;
  --skugga-ruta: 0 1px 2px color-mix(in oklch, var(--farg-text) 6%, transparent);
}

body { margin: 0; background: var(--farg-bakgrund); color: var(--farg-text); font-family: var(--typsnitt-text); }
a { color: var(--farg-lank); } a:hover { color: var(--farg-lank-hover); }
:focus-visible { outline: 3px solid var(--farg-fokus); outline-offset: 2px; }
.rubrik { font-family: var(--typsnitt-rubrik); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.dampad { color: var(--farg-text-dampad); }
.nummer { font-family: var(--typsnitt-nummer); }

/* Bento */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--bento-mellanrum); }
.ruta { background: var(--farg-yta); border: 1px solid var(--farg-kant); border-radius: var(--radie-ruta);
        padding: var(--ruta-inre); box-shadow: var(--skugga-ruta); min-width: 0; }
.ruta--sankt { background: var(--farg-yta-sankt); box-shadow: none; }
.ruta--varumarke { background: var(--farg-varumarke-mjuk); border-color: var(--primar-100); }
.s-2 { grid-column: span 2; } .s-3 { grid-column: span 3; } .s-4 { grid-column: span 4; } .s-5 { grid-column: span 5; }
.s-6 { grid-column: span 6; } .s-7 { grid-column: span 7; } .s-8 { grid-column: span 8; }
.s-9 { grid-column: span 9; } .s-12 { grid-column: span 12; }
.h-2 { grid-row: span 2; }
@media (max-width: 900px) { .bento > * { grid-column: span 12; } }

/* Knappar */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
         padding: 0 18px; border-radius: var(--radie-kontroll); font: 600 15px var(--typsnitt-text);
         border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.knapp--atgard { background: var(--farg-atgard); color: var(--farg-atgard-text); }
.knapp--atgard:hover { background: var(--farg-atgard-hover); color: var(--farg-atgard-text); }
.knapp--varumarke { background: var(--farg-varumarke); color: var(--farg-text-inverterad); }
.knapp--sekundar { background: var(--farg-yta); color: var(--farg-text); border-color: var(--farg-kant-stark); }

/* Status: pastellbakgrund, mörk text i samma kulörton, stark accent för ikon/punkt */
.bricka { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--radie-bricka);
          font-size: 13px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.bricka::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.meddelande { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radie-kontroll);
              border: 1px solid transparent; font-size: 15px; }
.meddelande svg { flex-shrink: 0; margin-top: 1px; }
.status-lyckad  { background: var(--status-lyckad-bakgrund);  border-color: var(--status-lyckad-kant);  color: var(--status-lyckad-text); }
.status-varning { background: var(--status-varning-bakgrund); border-color: var(--status-varning-kant); color: var(--status-varning-text); }
.status-fel     { background: var(--status-fel-bakgrund);     border-color: var(--status-fel-kant);     color: var(--status-fel-text); }
.status-info    { background: var(--status-info-bakgrund);    border-color: var(--status-info-kant);    color: var(--status-info-text); }
.status-lyckad  .accent, .status-lyckad.bricka::before  { color: var(--status-lyckad-accent);  background: var(--status-lyckad-accent); }
.status-varning .accent, .status-varning.bricka::before { color: var(--status-varning-accent); background: var(--status-varning-accent); }
.status-fel     .accent, .status-fel.bricka::before     { color: var(--status-fel-accent);     background: var(--status-fel-accent); }
.status-info    .accent, .status-info.bricka::before    { color: var(--status-info-accent);    background: var(--status-info-accent); }
.meddelande .accent { background: none; }

/* Formulär */
.falt { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--farg-text-dampad); }
.falt input, .falt select { font: 400 15px var(--typsnitt-text); color: var(--farg-text); height: 42px; padding: 0 12px;
                            border: 1px solid var(--farg-kant-stark); border-radius: var(--radie-kontroll); background: var(--farg-yta); }
.falt--fel input { border-color: var(--status-fel-accent); background: var(--status-fel-bakgrund); }