/* ==========================================================================
   Jukselapp — Typography tokens

   FONT SUBSTITUTION NOTE: no font files were supplied with the brand
   materials. The poster headlines use bold, hand-cut screenprint lettering
   (tall, condensed, slightly irregular caps) and the logotype "jukselapp."
   uses a bespoke ball-terminal display face. Closest Google Fonts matches
   used as stand-ins below — swap for real brand fonts if/when supplied:
     - Display/poster headlines → "Anton" (bold condensed grotesk, common in
       protest/poster lettering)
     - Body/UI text → "IBM Plex Sans" (clean humanist grotesk with solid
       support for Sámi/Nordic extended-Latin characters: š, ŧ, đ, ŋ, å, æ, ø)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Poster-style type is always uppercase display; body copy stays sentence case */
  --tracking-display: 0.005em;
  --tracking-label: 0.08em;

  --text-poster-xl: 700 clamp(3.5rem, 9vw, 8rem)/0.92 var(--font-display);
  --text-poster-lg: 700 clamp(2.5rem, 6vw, 4.5rem)/0.94 var(--font-display);
  --text-poster-md: 700 clamp(1.75rem, 3.4vw, 2.75rem)/0.96 var(--font-display);
  --text-poster-sm: 700 clamp(1.25rem, 2vw, 1.75rem)/1 var(--font-display);

  --text-h1: 600 clamp(2rem, 4vw, 3rem)/1.05 var(--font-body);
  --text-h2: 600 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--font-body);
  --text-h3: 600 1.375rem/1.25 var(--font-body);
  --text-body-lg: 400 1.125rem/1.55 var(--font-body);
  --text-body: 400 1rem/1.55 var(--font-body);
  --text-body-sm: 400 0.875rem/1.5 var(--font-body);
  --text-label: 600 0.8125rem/1.2 var(--font-body);
  --text-caption: 500 0.75rem/1.4 var(--font-body);
}