/* Pikkolo brand layer for Element Web.
   Fonts are self-hosted so the client makes no third-party requests. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/branding/fonts/SpaceGrotesk.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/branding/fonts/JetBrainsMono.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Element's newer surfaces read these Compound tokens. */
  --cpd-font-family-sans: 'Space Grotesk', Inter, system-ui, -apple-system, sans-serif;
  --cpd-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --pk-primary: #ff206e;
  --pk-secondary: #fbff12;
  --pk-tertiary: #41ead4;
  --pk-ink: #0c0f0a;
}

/* Older Element surfaces still key off these. */
body, .mx_MatrixChat, .mx_AuthPage {
  font-family: 'Space Grotesk', Inter, system-ui, -apple-system, sans-serif;
}

code, pre, .mx_EventTile_content .mx_EventTile_pre_container {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}