/* Discord brand tokens, from unfairly.ai/brand-guidelines/discord (checked 2026-10-31).
   Sizes, spacing and components were measured on https://discord.com/ (computed styles at 1440 and 390 with Playwright, 2026-10-31).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Discord's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #E0E3FF;
  --color-ink: #23272A;
  --color-ink-muted: #4E5058;
  --color-accent: #5865F2;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #EB459E;
  --color-night: #1A2081;
  --color-on-night: #FFFFFF;
  --color-blurple: #5865F2;
  --color-light-blurple: #E0E3FF;
  --color-black: #000000;
  --color-not-quite-black: #23272A;
  --color-green: #57F287;
  --color-yellow: #FEE75C;
  --color-fuchsia: #EB459E;
  --color-red: #ED4245;
  --color-white: #FFFFFF;
  --color-deep-space: #1A2081;
  --color-space-top: #080925;
  --color-space-glow: #353AAA;
  --color-phone-ground: #161CBB;
  --color-marquee-edge: #27266A;
  --color-marquee-centre: #5A60C4;
  --color-space-bottom: #000002;
  --color-footer-middle: #3D43AB;
  --color-footer-top: #211F62;
  --color-footer-bottom: #5764EE;
  --color-button-hover-grey: #C7C8CE;
  --color-ui-muted: #4E5058;
  --color-button-white-large-fill: #FFFFFF;
  --color-button-white-large-text: #23272A;
  --color-button-blurple-large-fill: #5865F2;
  --color-button-blurple-large-text: #FFFFFF;
  --color-button-login-fill: #FFFFFF;
  --color-button-login-text: #000000;
  --color-nav-link-text: #FFFFFF;
  --color-footer-link-text: #FFFFFF;
  --font-display: Archivo, Archivo, "Arial Black", sans-serif;
  --font-display-original: "ABC Ginto Discord Nord", Archivo, Archivo, "Arial Black", sans-serif;
  --font-body: "DM Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body-original: "ABC Ginto Discord", "DM Sans", "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --page-margin: 100px;
  --section-padding: 140px;
  --container-max: 1240px;
  --hero-text-max: 491px;
  --card-gap: 206px;
  --nav-height: 80px;
  --grid-gutter: 48px;
  --grid-columns: 2;
  --text-display-xl-size: 56px;
  --text-display-xl-line: 0.857;
  --text-display-xl-weight: 900;
  --text-display-xl-tracking: -0.56px;
  --text-display-xl-width: 112;
  --text-display-lg-size: 48px;
  --text-display-lg-line: 1.2;
  --text-display-lg-weight: 900;
  --text-display-lg-tracking: -0.48px;
  --text-display-lg-width: 112;
  --text-display-md-size: 36px;
  --text-display-md-line: 0.93;
  --text-display-md-weight: 900;
  --text-display-md-tracking: -0.36px;
  --text-display-md-width: 112;
  --text-marquee-size: 61px;
  --text-marquee-line: 0.41;
  --text-marquee-weight: 900;
  --text-marquee-width: 112;
  --text-body-lg-size: 20px;
  --text-body-lg-line: 1.3;
  --text-body-lg-weight: 400;
  --text-body-lg-tracking: 0.32px;
  --text-button-lg-size: 20px;
  --text-button-lg-line: 1.3;
  --text-button-lg-weight: 400;
  --text-button-lg-tracking: 0.25px;
  --text-nav-size: 16px;
  --text-nav-line: 1.2;
  --text-nav-weight: 500;
  --text-footer-link-size: 16px;
  --text-footer-link-line: 1.5;
  --text-footer-link-weight: 400;
  --text-footer-label-size: 16px;
  --text-footer-label-line: 1.25;
  --text-footer-label-weight: 400;
  --radius-button-white-large: 12px;
  --radius-button-blurple-large: 12px;
  --radius-button-login: 16px;
  --radius-feature-card: 120px;
  --radius-video-frame: 104px;
  --radius-language-select: 16px;
  --radius-burger: 14px;
  --ease-button-hover: ease;
  --duration-button-hover: 300ms;
  --ease-nav-login-hover: ease;
  --duration-nav-login-hover: 250ms;
  --icon-ui: 24px;
}
/* Phone values measured at 390px; Discord's CSS switches at 767px. */
@media (max-width: 767px) {
  :root {
    --page-margin: 24px;
    --section-padding: 110px;
    --text-display-xl-size: 27px;
    --text-display-lg-size: 27px;
    --text-display-md-size: 27px;
    --text-body-lg-size: 16px;
    --text-button-lg-size: 18px;
    --text-footer-link-size: 14px;
    --text-footer-label-size: 14px;
  }
}
.button-white-large {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 65px; padding: 0 24px; border-radius: 12px;
  background: #FFFFFF; color: #23272A;
  font: 400 20px/1 var(--font-body);
}
.button-white-large:hover { background-color: #C7C8CE; box-shadow: 0 8px 15px rgba(0,0,0,0.2); } /* observed */
.button-blurple-large {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 65px; padding: 0 24px; border-radius: 12px;
  background: #5865F2; color: #FFFFFF;
  font: 400 20px/1 var(--font-body);
}
.button-login {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 39px; padding: 0 16px; border-radius: 16px;
  background: #FFFFFF; color: #000000;
  font: 500 16px/1 var(--font-body);
}
.button-login:hover { background-color: #C7C8CE; } /* observed */