/* Mr Face design tokens. Generated by kit/src/tokens.py; edit there, not here.
   Fonts: Lexend (SIL OFL 1.1, see fonts/OFL.txt). Path below is relative to this file. */
@font-face {
  font-family: "Lexend";
  src: url("fonts/Lexend-VariableFont_wght.woff2") format("woff2-variations"),
       url("fonts/Lexend-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --mf-night: #04011F;
  --mf-night-glow: #2A10FF;
  --mf-window: #020114;
  --mf-magenta: #F806EE;
  --mf-violet: #8A44FE;
  --mf-pink: #FE268E;
  --mf-orange: #FD9A33;
  --mf-yellow: #FCE626;
  --mf-lens-glass: #1E0270;
  --mf-highlight: #D3C7EA;
  --mf-white: #FFFFFF;
  --mf-background: #04011F;
  --mf-surface: #0E0730;
  --mf-surface-raised: #180F45;
  --mf-stroke: #2B2163;
  --mf-stroke-strong: #6B5BD0;
  --mf-text-primary: #FFFFFF;   /* min 17.6:1 on the dark surfaces */
  --mf-text-secondary: #CFC8F0;   /* min 11.04:1 on the dark surfaces */
  --mf-text-muted: #A79FD8;   /* min 7.2:1 on the dark surfaces */
  --mf-accent-violet: #B28CFF;   /* min 6.78:1 on the dark surfaces */
  --mf-accent-magenta: #F806EE;   /* min 5.24:1 on the dark surfaces */
  --mf-accent-pink: #FE4D9E;   /* min 5.67:1 on the dark surfaces */
  --mf-accent-orange: #FD9A33;   /* min 8.25:1 on the dark surfaces */
  --mf-accent-yellow: #FCE626;   /* min 13.82:1 on the dark surfaces */
  --mf-success: #45E0A0;   /* min 10.41:1 on the dark surfaces */
  --mf-error: #FF6B8B;   /* min 6.48:1 on the dark surfaces */
  --mf-on-gradient: #04011F;
  --mf-gradient-face: linear-gradient(54deg, #AE2FFA, #E540F7, #E338F4, #FF25D2, #FC3F77, #FDA411, #FDDF1C);
  --mf-gradient-spectrum: linear-gradient(55deg, #8146FE, #C63CFD, #F806EE, #FE268E, #FD6252, #FDA233, #FCE626);
  --mf-gradient-cta: linear-gradient(90deg, #F806EE, #FE268E, #FD9A33);
  --mf-gradient-rule: linear-gradient(90deg, #F809F7, #FD1DC2, #FD4B74, #FB7945, #FFAC25, #FCD51A);
  --mf-gradient-hot: linear-gradient(105deg, #F80AF3, #FC06D8, #FE268E, #FD6252, #FDA233, #FED020, #FCE626);
  --mf-gradient-mid: linear-gradient(125deg, #AA44FD, #C541FD, #DD40F6, #F728E7, #FE2DBE, #FE48A6, #FE7686);
  --mf-gradient-low: linear-gradient(117deg, #8146FE, #A545FE, #C63CFD, #E826FB, #FE06FC, #FD08FB, #FC06F5);
  --mf-gradient-stache: linear-gradient(132deg, #FCC350, #FBC13A, #FEC425, #FE9530, #FD595A, #FD209F, #F80CEA);
  --mf-gradient-night: linear-gradient(180deg, #04021F, #020116);
  --mf-gradient-face-on-light: linear-gradient(54deg, #AE2FFA, #E540F7, #E338F4, #FF25D2, #FC3F77, #FD9009, #FD9200);
  --mf-hero-haze: radial-gradient(60% 50% at 50% 40%, rgba(42, 16, 255, .16), rgba(42, 16, 255, 0) 70%);
  --mf-font: "Lexend", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mf-weight-wordmark: 800;
  --mf-tracking-wordmark: -0.085em;
  --mf-weight-display: 800;
  --mf-tracking-display: -0.04em;
  --mf-weight-headline: 600;
  --mf-tracking-headline: -0.05em;
  --mf-weight-body: 400;
  --mf-tracking-body: 0em;
  --mf-weight-caps: 300;
  --mf-tracking-caps: 0.36em;
  --mf-radius-sm: 8px;
  --mf-radius-md: 14px;
  --mf-radius-lg: 22px;
  --mf-radius-pill: 999px;
  --mf-space-xs: 4px;
  --mf-space-sm: 8px;
  --mf-space-md: 16px;
  --mf-space-lg: 24px;
  --mf-space-xl: 40px;
}

/* gradient text, e.g. <span class="mf-gradient-text">But our app can.</span> */
.mf-gradient-text {
  background: var(--mf-gradient-face);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mf-caps {
  font-weight: var(--mf-weight-caps);
  letter-spacing: var(--mf-tracking-caps);
  text-transform: uppercase;
  font-feature-settings: "ss01" 1;
}