/* ============================================================
   SALONGSMALLEN — bas
   Reset, typografiska grundvärden, fokus. Inga sektioner här.
   Kräver tokens.css + ett tema före sig i kaskaden.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--body-leading);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, video { display: block; max-width: 100%; height: auto; }

/* Räta hörn är en regel, inte en slump. Se ART-DIRECTION.md §1. */
img { border-radius: var(--radius); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--display-weight);
  line-height: var(--display-leading);
  letter-spacing: var(--display-tracking);
  text-transform: var(--display-case);
  font-family: var(--font-display);
  text-wrap: balance;
}

p { margin: 0; max-width: var(--measure); }

/* Kursiven i en rubrik — signaturen. ART-DIRECTION.md §3.
   ------------------------------------------------------------
   Standardläget är ACCENTFÄRG, inte kursiv. Skälet: bara ett av
   typsnitten i mallen (Cormorant) har ett riktigt kursivt snitt.
   Ber man om kursiv på Italiana eller Schibsted får man antingen
   en lutad falsk kursiv eller — värre — webbläsarens Georgia
   Italic mitt i rubriken. Två typsnitt i samma mening ser trasigt
   ut, och vilket det blir beror på besökarens maskin.

   Ett tema med äkta kursiv slår på den själv, som varm-modern
   gör längst ner. Nya teman får det säkra läget gratis. */
:where(h1, h2, h3, .display, .h2, .h3) em {
  font-style: normal;
  font-synthesis: none;
  color: var(--accent);
}
:where(.pa-morkt, .band--mork) :where(h1, h2, h3, .display, .h2, .h3) em {
  color: var(--accent-on-dark);
}

/* Teman vars display har ett RIKTIGT kursivt snitt slår på det.
   Cormorant Garamond (varm-modern) och Archivo (redaktionell).
   Här är rak+kursiv-mixen den äkta varan och färgen får vara kvar. */
[data-tema="varm-modern"] :where(h1, h2, h3, .display, .h2, .h3) em,
[data-tema="redaktionell"] :where(h1, h2, h3, .display, .h2, .h3) em,
[data-tema="barber"] :where(h1, h2, h3, .display, .h2, .h3) em,
[data-tema="monokrom"] :where(h1, h2, h3, .display, .h2, .h3) em,
[data-tema="morker-koppar"] :where(h1, h2, h3, .display, .h2, .h3) em {
  font-style: italic;
  /* Kursiven är inte bara lutad — den är också LJUSARE. Sett i
     samtliga sex haires-demos och i Cassini 02. Vi bytte tidigare
     bara snitt, och det är en av anledningarna till att mixen såg
     platt ut hos oss.

     25 % mot bakgrunden. Rubriker är stor text, så AA-kravet är
     3:1 — en rubrik på 16:1 landar kring 10:1 och klarar det med
     god marginal. Använd aldrig samma dämpning på brödtext. */
  color: color-mix(in srgb, currentColor 75%, var(--paper));
}
/* Klasserna står utanför :where() med flit — regeln ovan har
   specificiteten (0,1,1) via [data-tema], och den här måste minst
   matcha den för att vinna på mörka band. */
.pa-morkt :where(h1, h2, h3, .display, .h2, .h3) em,
.band--mork :where(h1, h2, h3, .display, .h2, .h3) em {
  color: color-mix(in srgb, currentColor 75%, var(--surface));
}

/* Siffror i displaysnittet — ALLTID versalsiffror.
   ------------------------------------------------------------
   Garaldserifer (Cormorant, EB Garamond) och en del displaysnitt
   levererar gammaldags siffror som standard: 1 blir en liten
   kapitäl-etta som läser som ett I, och 3, 4, 7, 9 hänger under
   baslinjen. "1 STOL" blev "I STOL" i förtroendemärket, och "14 år"
   blev "I4 år" i cirkelstämpeln.

   Italiana saknar lnum-tabellen helt och löses i stället med en
   egen @font-face som bara täcker U+0030–0039 — se fonts.css.
   För typsnitt som HAR tabellen räcker den här raden.

   tabular-nums gör dessutom att siffror i en prislista eller
   statistikrad står i lodräta kolumner. */
:where(.display, .h2, .h3, h1, h2, h3,
       .statistik__tal, .cirkelstampel b, .fortroendemarke b,
       .nivakort__belopp, .numrerad__nr, .delad-skarm__pris,
       .pris__belopp, .prisniva__belopp, .steg__post::before) {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Fokusmarkering tas aldrig bort — bara ersätts med en tydligare. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.pa-morkt :focus-visible { outline-color: var(--accent-on-dark); }

::selection { background: var(--accent); color: var(--accent-ink); }