/* Design tokens, transcribed from docs/DESIGN.md.
 *
 * Values are copied, not re-derived. The contrast ratios in chapter 3 and the
 * six-test validation of the categorical palette in chapter 5 were computed
 * against these exact hex values; changing one without rerunning that check
 * invalidates both.
 *
 * No dark mode. Chapter 3 leaves it out on purpose: the paper metaphor is the
 * whole look and an inverted version of it is a different design, not a mirror.
 */

:root {
  /* ---- Surfaces ---- */
  --paper:        #FAF8F4;  /* warm paper white, never pure white */
  --paper-raised: #F2EEE6;  /* raised surface, table headers */

  /* ---- Ink ---- */
  --ink:          #14181F;  /* near-black with a blue undertone   16,78:1 AAA */
  --ink-2:        #454C57;  /* secondary text                      8,17:1 AAA */
  --ink-3:        #636B76;  /* muted — floor for body text         5,08:1 AA  */

  /* ---- Rules ---- */
  --rule:         #E2DCD0;  /* hairline separators */
  --rule-strong:  #C9C1B1;  /* table borders, axes  */

  /* ---- Structural accent: glacier blue ---- */
  --accent:       #2F6EA0;  /* surfaces and borders                5,13:1 AA */
  --accent-ink:   #2A6392;  /* same accent when it carries text    6,00:1 AA */

  /* ---- Emphasis: sparingly, one place at a time ---- */
  --highlight:     #C24E27; /* borders and large text only         4,49:1 */
  --highlight-ink: #A8401F; /* emphasis carrying text              5,79:1 AA */

  /* ---- Categorical, fixed order, never cycled ---- */
  --cat-1: #2F6EA0;  /* glacier blue — same as --accent    */
  --cat-2: #C24E27;  /* rust red     — same as --highlight */
  --cat-3: #008F82;  /* deep teal      */
  --cat-4: #9C8410;  /* ochre          */
  --cat-5: #8A4F86;  /* plum           */
  --cat-6: #4F7A33;  /* olive          */

  /* ---- Type ---- */
  --serif: "Source Serif 4", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;

  --hero:       5.5rem;    /* 88px, weight 300, serif */
  --yfirskrift: 3.5rem;    /* 56px, weight 300, serif */
  --h1:         2.5rem;    /* 40px, weight 400, serif */
  --h2:         1.75rem;   /* 28px, weight 600, serif */
  --h3:         1.25rem;   /* 20px, weight 600, sans  */
  --megin:      1.0625rem; /* 17px, weight 400, sans  */
  --smatt:      0.875rem;  /* 14px, weight 400, sans  */
  --orsmatt:    0.75rem;   /* 12px, weight 500, sans  */

  --lh-fyrirsogn: 1.15;
  --lh-megin:     1.6;
  --lh-tafla:     1.35;

  /* ---- Space: four pixel base ---- */
  --s1:   4px;  --s2:   8px;  --s3:  12px;  --s4:  16px;
  --s6:  24px;  --s8:  32px;  --s12: 48px;  --s16: 64px;
  --s24: 96px;  --s32: 128px;

  /* ---- Grid ---- */
  --breidd-megin:  68ch;   /* body text, never wider */
  --breidd-tafla:  880px;
  --breidd-mynd:  1180px;  /* charts may break out */
}

/* ---- Fonts. Static weights: DESIGN chapter 2 warns that a variable weight
       axis does not always cover every glyph, and only eight weights are used. */

@font-face { font-family: "Source Serif 4"; font-weight: 300; font-style: normal;
  font-display: swap; src: url("letur/SourceSerif4-300.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 400; font-style: normal;
  font-display: swap; src: url("letur/SourceSerif4-400.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-style: normal;
  font-display: swap; src: url("letur/SourceSerif4-600.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal;
  font-display: swap; src: url("letur/IBMPlexSans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal;
  font-display: swap; src: url("letur/IBMPlexSans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal;
  font-display: swap; src: url("letur/IBMPlexSans-600.woff2") format("woff2"); }

@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal;
  font-display: swap; src: url("letur/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal;
  font-display: swap; src: url("letur/IBMPlexMono-500.woff2") format("woff2"); }

/* ---- Reset and base ---- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--megin);
  line-height: var(--lh-megin);
  font-feature-settings: "kern";
}

/* Every numeral, everywhere. Columns that shift sideways destroy any sense of
   precision, and this site is nothing but numbers. */
[class*="tala"], td, th, time, .hetjutala, .monotala {
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 { line-height: var(--lh-fyrirsogn); margin: 0 0 var(--s4); text-wrap: balance; }
h1 { font-family: var(--serif); font-size: var(--h1); font-weight: 400; }
h2 { font-family: var(--serif); font-size: var(--h2); font-weight: 600; }
h3 { font-family: var(--sans);  font-size: var(--h3); font-weight: 600; }

/* Chapter 4: between sections, large. Within a section, small. A heading with
   no space above it makes one chapter run into the last line of the previous. */
h2 { margin-top: var(--s16); }
h3 { margin-top: var(--s8); }
h1 + h2 { margin-top: var(--s8); }
h2:first-child, h3:first-child { margin-top: 0; }

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

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

/* Chapter 7: clear focus rings, 2px, offset 2px. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Chapter 4: hairlines and space, not boxes and shadows. Radius 2px or none,
   and no box-shadow anywhere on the site. */
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s12) 0; }

/* ---- Motion. Chapter 7: minimal, and always in service of understanding. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}