/* Grunden: typsnitt, variabler och grundelement. Alla färger i verktyget
   står här och bara här, som variabler. Mörkt läge byter värdena, inte
   reglerna. Kontrasten prövas av tests/webb/test_stilmall.py. */

@font-face {
  font-family: "Inter";
  src: url("../typsnitt/inter-400.da03732a27e1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../typsnitt/inter-600.2ede57db1a3a.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  --bakgrund: #ffffff;
  --yta: #f5f6f2;
  --text: #1a1d23;
  --dampad: #5b6270;
  --ram: #d8dbd2;
  /* Fältens kant är en kontroll och måste klara 3:1, till skillnad från
     tabellernas linjer. */
  --ram-falt: #868b80;
  --accent: #3d4a2f;
  --accent-text: #ffffff;
  --sidhuvud: #3d4a2f;
  --sidhuvud-text: #ffffff;
  --fel: #b42318;
  --varning: #b54708;
  --ratt: #067647;
  --semester: #dbeafe;
  --komp: #dcfce7;
  --fm: #fef3c7;
  --helg: #f1f2f4;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --radie: 4px;

  /* Flikradens höjd på mobil, utan safe-area. main och rullningen räknar med den. */
  --flikrad: 3.5rem;

  --typsnitt: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bakgrund: #15170f;
    --yta: #1d2017;
    --text: #e7e9e1;
    --dampad: #a0a594;
    --ram: #30352a;
    --ram-falt: #6b7163;
    --accent: #b5c38f;
    --accent-text: #1a1f10;
    --sidhuvud: #262c1d;
    --sidhuvud-text: #e7e9e1;
    --fel: #f97066;
    --varning: #fdb022;
    --ratt: #47cd89;
    --semester: #1e3a5f;
    --komp: #1f4a33;
    --fm: #5a4715;
    --helg: #1a1c15;
  }
}

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

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
}

/* iOS zoomar in i fält med mindre text än 16 px. */
@media (max-width: 767px) {
  html { font-size: 16px; }
}

body {
  margin: 0;
  font-family: var(--typsnitt);
  line-height: 1.45;
  color: var(--text);
  background: var(--bakgrund);
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.25;
  margin: var(--s5) 0 var(--s3);
}

h1 { font-size: 1.5rem; margin-top: 0; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.9rem; }

p { margin: var(--s2) 0; }

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

small { color: var(--dampad); }

table { font-variant-numeric: tabular-nums; }

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