/*
  base.css — grundläggande typografi och element, inga komponenter.
  Allt värde hämtas från tokens.css. Inga bokstavliga värden här.
*/
@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font);
    font-weight: var(--weight-regular);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    font-weight: var(--weight-bold);
    text-wrap: balance;
  }

  p, li {
    max-width: var(--measure);
    overflow-wrap: break-word;
  }

  strong, b {
    font-weight: var(--weight-bold);
  }

  a {
    text-underline-offset: 0.15em;
  }

  a[href]:not([class]) {
    text-decoration: underline;
  }
  a[href]:not([class]):hover {
    color: var(--signal);
  }

  :focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
  }

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

  /* Siffror i pris och tid ligger still i tabeller/rader — aldrig
     proportionell bredd som gör att en rad "hoppar" när sekunder
     tickar. */
  .num, time, .price {
    font-variant-numeric: tabular-nums;
  }

  /* Typskala som semantiska klasser — komponenter kombinerar dessa
     med element, de skriver aldrig font-size själva. */
  /* Copy-regel, inte en CSS-regel: inget ord över 12 tecken i
     display-text. Golvet i --t-display (tokens.css) är dimensionerat
     för det, inte för godtyckligt långa ord. Ett brutet ord mitt i en
     rubrik ser trasigt ut — därför inget overflow-wrap här. */
  .display {
    font-size: var(--t-display);
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-display);
  }
  /* Fallback för det enstaka undantagsfallet där ett långt ord ändå
     måste sättas i display-storlek: riktig avstavning, inte ett
     avbrutet ord. Kräver att elementet (eller en förälder) har
     lang="sv" för att webbläsaren ska avstava på svenska. */
  .display--hyphenate {
    hyphens: auto;
  }
  .h1 {
    font-size: var(--t-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--tracking-h1);
  }
  .h2 {
    font-size: var(--t-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--tracking-h2);
  }
  .body-lg {
    font-size: var(--t-body-lg);
    line-height: var(--lh-body-lg);
    font-weight: var(--weight-regular);
    color: var(--ink-soft);
  }
  .body {
    font-size: var(--t-body);
    line-height: var(--lh-body);
    color: var(--ink-soft);
  }
  .small {
    font-size: var(--t-small);
    line-height: var(--lh-small);
    color: var(--ink-mute);
  }
  .label {
    font-size: var(--t-label);
    line-height: 1;
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-mute);
  }

  /* Mörk sektion — medveten kontrast på enskilda block, inte ett
     parallellt tema. Sätts som klass på en <section>. */
  .on-dark {
    background: var(--ink);
    color: var(--ink-on-dark);
  }
  .on-dark .body,
  .on-dark .body-lg,
  .on-dark .small,
  .on-dark .label {
    color: var(--ink-on-dark-soft);
  }
  .on-dark .rule {
    border-color: rgba(244, 243, 239, 0.2);
  }
  /* --signal mot --ink ger bara 3,30:1 (docs/beslut.md) — över
     minimikravet för en icke-textkontur (3:1) men för tunt för att
     lita på i praktiken. --paper mot --ink ger 17:1 och används
     därför som fokusfärg på mörka sektioner istället för den vanliga
     accentfärgen. */
  .on-dark :focus-visible {
    outline-color: var(--paper);
  }
}