// ────────────────────────────────────────────────────────────────
// Tokens · Typografie
//
// Zwei Rollen, und beide sind die Systemschriften des Rechners — so, wie
// johannesbrunner.de es haelt: keine Webfonts, keine Ladezeit, und die Seite
// sieht aus wie die Startseite, weil beide dieselbe Schrift benutzen.
//   UI/Text, Marke, Titel → ui-sans-serif / system-ui   (--font-sans/-brand/-display)
//   Daten, Code           → ui-monospace               (--font-mono)
// ────────────────────────────────────────────────────────────────

$font-sans:    ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif !default;
$font-mono:    ui-monospace, "DejaVu Sans Mono", Menlo, monospace !default;
$font-brand:   $font-sans !default;   // Wortmarke = Grundtext
$font-display: $font-sans !default;   // Titel/Ueberschriften = Grundtext

// Feste Groessen-Skala (rem, relativ zur Basis 16px).
$font-sizes: (
  xs:   .6875rem, // 11
  sm:   .75rem,   // 12
  md:   .875rem,  // 14
  base: 1rem,     // 16
  lg:   1.25rem,  // 20
  xl:   1.5rem,   // 24
  2xl:  2rem,     // 32
  3xl:  2.5rem,   // 40
) !default;

// Fluid-Display-Groessen (clamp) — fuer Marke/Hero.
// `lg` ist die Marke und traegt den Wert der Startseite woertlich.
$font-displays: (
  sm: clamp(1.6rem, 4vw, 2.4rem),
  md: clamp(2.3rem, 6vw, 3.7rem),
  lg: clamp(52px, 10vw, 92px),
) !default;

$font-weights: (
  extralight: 200,
  light:    300,
  normal:   400,
  medium:   500,
  semibold: 600,
  bold:     700,
) !default;

$line-heights: (
  tight: 1.2,
  base:  1.5,
  loose: 1.7,
) !default;

$trackings: (
  tight:  -.02em,
  normal: 0,
  wide:   .14em,
  wider:  .26em,
  widest: .34em,
) !default;

@mixin type-tokens {
  --font-sans: #{$font-sans};
  --font-mono: #{$font-mono};
  --font-brand: #{$font-brand};
  --font-display: #{$font-display};

  @each $name, $value in $font-sizes {
    --fs-#{$name}: #{$value};
  }
  @each $name, $value in $font-displays {
    --display-#{$name}: #{$value};
  }
  @each $name, $value in $font-weights {
    --fw-#{$name}: #{$value};
  }
  @each $name, $value in $line-heights {
    --lh-#{$name}: #{$value};
  }
  @each $name, $value in $trackings {
    --tracking-#{$name}: #{$value};
  }
}