/**
 * K77 design tokens (P3.2).
 *
 * Colours: original body `text` / `link` / `vlink` / `alink` from P1.2.
 * Type: Chicago 14pt headings (`.Ort` in Raum Vorlage); body Geneva.
 * Space: frameset `cols="300,70%"`, frame `marginwidth` 20 / 30, cellpadding 5–25.
 *
 * Apple Chicago and Geneva are proprietary. They must not be copied into the
 * repo. Heading webfont (pending download approval): Sysfont by Alina Sava,
 * SIL Open Font License 1.1, Latin Extended (German umlauts). Until the file
 * is vendored at assets/vendor/fonts/sysfont.woff2, this @font-face aliases
 * Sysfont to a local Chicago or to Krungthep (macOS Chicago-metric face).
 */

@font-face {
  font-family: Sysfont;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Chicago"),
    local("Krungthep");
}

:root {
  /* --- Colour --- */
  --color-bg: #000000;

  --color-text-raeume: #ffcc99;
  --color-text-initiativen: #9999cc;
  --color-text-zeit: #99cc99;
  --color-text-shell: #9999cc;
  --color-text-home: #999999;

  /* Canonical links (plan § 3.1 / most raeume pages). */
  --color-link: #ff0000;
  --color-link-alt: #ff6633;
  --color-link-visited: #ff9966;
  --color-link-active: #ff3300;

  /* Section majorities (page-level exceptions stay in front matter / P5.1). */
  --color-link-raeume: #ff0000;
  --color-link-visited-raeume: #ff9966;
  --color-link-active-raeume: #ff3300;

  --color-link-initiativen: #999999;
  --color-link-visited-initiativen: #999999;
  --color-link-active-initiativen: #3333cc;

  --color-link-zeit: #999999;
  --color-link-visited-zeit: #999999;
  --color-link-active-zeit: #00cc66;

  --color-gray-33: #333333;
  --color-gray-66: #666666;
  --color-gray-99: #999999;

  --color-text: var(--color-text-shell);

  /* --- Type --- */
  --font-heading: Sysfont, Chicago, Krungthep, Geneva, "Helvetica Neue", Arial, sans-serif;
  --font-body: Geneva, "Helvetica Neue", Arial, sans-serif;

  /* HTML <font size> as typical browser mapping (D2 may enlarge later). */
  --font-size-1: 10px;
  --font-size-2: 13px;
  --font-size-3: 16px;
  --font-size-4: 18px;
  --font-size-5: 24px;
  --font-size-heading: 14pt;
  --font-size-body: var(--font-size-2);
  --line-height-body: 1.35;

  /* --- Space (px, as in the original tables) --- */
  --space-0: 0;
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 25px;
  --space-6: 30px;

  --nav-width: 300px;
  --nav-margin: var(--space-4);
  --content-margin: var(--space-6);
  --breakpoint-nav: 768px;

  /* --- Focus / motion (not in the original; required for the restoration) --- */
  --focus-ring: 2px solid var(--color-link);
  --duration-fade: 200ms;
}

[data-section="raeume"] {
  --color-text: var(--color-text-raeume);
  --color-link: var(--color-link-raeume);
  --color-link-visited: var(--color-link-visited-raeume);
  --color-link-active: var(--color-link-active-raeume);
}

[data-section="initiativen"] {
  --color-text: var(--color-text-initiativen);
  --color-link: var(--color-link-initiativen);
  --color-link-visited: var(--color-link-visited-initiativen);
  --color-link-active: var(--color-link-active-initiativen);
}

[data-section="zeit"] {
  --color-text: var(--color-text-zeit);
  --color-link: var(--color-link-zeit);
  --color-link-visited: var(--color-link-visited-zeit);
  --color-link-active: var(--color-link-active-zeit);
}

[data-section="shell"] {
  --color-text: var(--color-text-shell);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fade: 0ms;
  }
}

html {
  background: var(--color-bg);
  color: var(--color-text);
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

h1,
h2,
h3,
.heading,
.ort {
  font-family: var(--font-heading);
  font-size: var(--font-size-heading);
  font-weight: normal;
}

a {
  color: var(--color-link);
}

a:visited {
  color: var(--color-link-visited);
}

a:active {
  color: var(--color-link-active);
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}