@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.c47ac31e5437.woff2") format('woff2');
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/figtree-latin.392aed3eb142.woff2") format('woff2');
}

:root {
  /* Retning A, Nattlys: dark pine night, candle gold, glowing team colours. */
  --bg: #0E1714;
  --surface: #17231F;
  --surface-2: #1C2620;
  --surface-raised: #1A2622;
  --line: #2A3833;
  --line-strong: #3A4A44;
  --text: #F5EFE3;
  --text-soft: #DCD4C4;
  --text-warm: #CFC6B4;
  --text-muted: #A9B5AE;
  --placeholder: #7F8C85;
  --gold: #F4C25B;
  --gold-hover: #FFD88A;
  --gold-tint: #2E2A17;
  --danger: #FF8A80;
  --danger-tint: #361C1C;
  --success: #6BE69A;
  --success-tint: #173225;
  --info: #9CCBFF;
  --info-tint: #172838;
  --secret: #CDB8FF;
  --secret-tint: #2A2238;
  --ink: #0E1714;
  --scrim: rgba(5, 10, 8, 0.72);

  /* Each page sets --team-color on <body>. Everything team-tinted derives from it. */
  --team-color: #FF9F1C;
  --team-tint: color-mix(in srgb, var(--team-color) 20%, var(--bg));
  --team-soft: color-mix(in srgb, var(--team-color) 60%, #FFFFFF);

  --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 34px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  --radius-sm: 12px;
  --radius: 16px;
  --radius-card: 20px;
  --radius-sheet: 28px;
  --radius-pill: 999px;

  --tap: 48px;
  --button-height: 56px;
  --topbar-height: 52px;
  --tabbar-height: 64px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.4);
}