@patreon/studio/styles/token-definitions.module.css

Patreon Studio Design System

/**
* This file is generated. Do not edit.
* Generated on Mon Jun 02 2025 12:48:47 PM
*/

.definitions {
  --dark-component-button-action-default: #ffffff;
  --dark-component-button-action-hover: #e8e8e8;
  --dark-component-button-action-pressed: #cccccc;
  --dark-component-button-onAction-default: #0d0d0d;
  --dark-component-button-onAction-hover: #131313;
  --dark-component-button-onAction-pressed: #252525;
  --dark-global-bg-base-default: #252525;
  --dark-global-bg-base-hover: #383838;
  --dark-global-bg-base-pressed: #4a4a4a;
  --dark-global-bg-baseAlt-default: #383838;
  --dark-global-bg-baseAlt-hover: #4a4a4a;
  --dark-global-bg-baseAlt-pressed: #5c5c5c;
  --dark-global-bg-elevated-default: #383838;
  --dark-global-bg-elevated-hover: #4a4a4a;
  --dark-global-bg-elevated-pressed: #5c5c5c;
  --dark-global-bg-page-default: #131313;
  --dark-global-bg-page-hover: #252525;
  --dark-global-bg-page-pressed: #383838;
  --dark-global-bg-pageAlt-default: #0d0d0d;
  --dark-global-bg-pageAlt-hover: #131313;
  --dark-global-bg-pageAlt-pressed: #252525;
  --dark-global-border-action-default: rgb(255 255 255 / 26%);
  --dark-global-border-action-hover: rgb(255 255 255 / 32%);
  --dark-global-border-action-pressed: rgb(255 255 255 / 39%);
  --dark-global-border-muted-default: rgb(255 255 255 / 19%);
  --dark-global-border-muted-hover: rgb(255 255 255 / 26%);
  --dark-global-border-muted-pressed: rgb(255 255 255 / 32%);
  --dark-global-content-inverted-default: #000000;
  --dark-global-content-inverted-hover: rgb(0 0 0 / 95%);
  --dark-global-content-inverted-pressed: rgb(0 0 0 / 90%);
  --dark-global-content-invertedMuted-default: rgb(0 0 0 / 60%);
  --dark-global-content-invertedMuted-hover: rgb(0 0 0 / 51%);
  --dark-global-content-invertedMuted-pressed: rgb(0 0 0 / 43%);
  --dark-global-content-invertedSubtle-default: rgb(0 0 0 / 43%);
  --dark-global-content-invertedSubtle-hover: rgb(0 0 0 / 51%);
  --dark-global-content-invertedSubtle-pressed: rgb(0 0 0 / 60%);
  --dark-global-content-muted-default: rgb(255 255 255 / 60%);
  --dark-global-content-muted-hover: rgb(255 255 255 / 53%);
  --dark-global-content-muted-pressed: rgb(255 255 255 / 46%);
  --dark-global-content-regular-default: #ffffff;
  --dark-global-content-regular-hover: rgb(255 255 255 / 93%);
  --dark-global-content-regular-pressed: rgb(255 255 255 / 87%);
  --dark-global-content-subtle-default: rgb(255 255 255 / 39%);
  --dark-global-content-subtle-hover: rgb(255 255 255 / 46%);
  --dark-global-content-subtle-pressed: rgb(255 255 255 / 53%);
  --dark-global-critical-action-default: #e54059;
  --dark-global-critical-action-hover: #c6374d;
  --dark-global-critical-action-pressed: #a72f41;
  --dark-global-critical-muted-default: rgb(198 55 77 / 20%);
  --dark-global-critical-muted-hover: rgb(198 55 77 / 27%);
  --dark-global-critical-muted-pressed: rgb(198 55 77 / 33%);
  --dark-global-critical-onAction-default: #ffffff;
  --dark-global-critical-onAction-hover: #feecef;
  --dark-global-critical-onAction-pressed: #fedee2;
  --dark-global-critical-onMuted-default: #fba3b0;
  --dark-global-critical-onMuted-hover: #fdc7cf;
  --dark-global-critical-onMuted-pressed: #fedee2;
  --dark-global-primary-action-default: #8bc5f5;
  --dark-global-primary-action-hover: #1c8eec;
  --dark-global-primary-action-pressed: #0d7cd8;
  --dark-global-primary-actionBase-default: #0b69b7;
  --dark-global-primary-actionBase-hover: #095696;
  --dark-global-primary-actionBase-pressed: #074476;
  --dark-global-primary-muted-default: rgb(255 255 255 / 19%);
  --dark-global-primary-muted-hover: rgb(255 255 255 / 26%);
  --dark-global-primary-muted-pressed: rgb(255 255 255 / 32%);
  --dark-global-primary-onActionBase-default: #ffffff;
  --dark-global-primary-onActionBase-hover: #e7f3fd;
  --dark-global-primary-onActionBase-pressed: #d4e9fb;
  --dark-global-primary-onMuted-default: #ffffff;
  --dark-global-primary-onMuted-hover: #ffffff;
  --dark-global-primary-onMuted-pressed: #ffffff;
  --dark-global-primary-onSubtle-default: rgb(255 255 255 / 60%);
  --dark-global-primary-onSubtle-hover: rgb(255 255 255 / 67%);
  --dark-global-primary-onSubtle-pressed: rgb(255 255 255 / 73%);
  --dark-global-primary-subtle-default: rgb(255 255 255 / 12%);
  --dark-global-primary-subtle-hover: rgb(255 255 255 / 19%);
  --dark-global-primary-subtle-pressed: rgb(255 255 255 / 26%);
  --dark-global-secondary-action-default: rgb(255 255 255 / 19%);
  --dark-global-secondary-action-hover: rgb(255 255 255 / 26%);
  --dark-global-secondary-action-pressed: rgb(255 255 255 / 32%);
  --dark-global-secondary-muted-default: rgb(255 255 255 / 12%);
  --dark-global-secondary-muted-hover: rgb(255 255 255 / 19%);
  --dark-global-secondary-muted-pressed: rgb(255 255 255 / 26%);
  --dark-global-secondary-onAction-default: #ffffff;
  --dark-global-secondary-onAction-hover: #ffffff;
  --dark-global-secondary-onAction-pressed: #ffffff;
  --dark-global-secondary-onMuted-default: rgb(255 255 255 / 60%);
  --dark-global-secondary-onMuted-hover: rgb(255 255 255 / 67%);
  --dark-global-secondary-onMuted-pressed: rgb(255 255 255 / 73%);
  --dark-global-success-action-default: #1cc86c;
  --dark-global-success-action-hover: #0db45b;
  --dark-global-success-action-pressed: #0b994d;
  --dark-global-success-muted-default: rgb(13 180 91 / 13%);
  --dark-global-success-muted-hover: rgb(13 180 91 / 20%);
  --dark-global-success-muted-pressed: rgb(13 180 91 / 27%);
  --dark-global-success-onAction-default: #000000;
  --dark-global-success-onAction-hover: rgb(0 0 0 / 95%);
  --dark-global-success-onAction-pressed: rgb(0 0 0 / 90%);
  --dark-global-success-onMuted-default: #5bd795;
  --dark-global-success-onMuted-hover: #8be3b4;
  --dark-global-success-onMuted-pressed: #b7edd0;
  --dark-global-warning-action-default: #fab719;
  --dark-global-warning-action-hover: #e6a409;
  --dark-global-warning-action-pressed: #c38b08;
  --dark-global-warning-muted-default: rgb(230 164 9 / 13%);
  --dark-global-warning-muted-hover: rgb(230 164 9 / 20%);
  --dark-global-warning-muted-pressed: rgb(230 164 9 / 27%);
  --dark-global-warning-onAction-default: #372702;
  --dark-global-warning-onAction-hover: #191201;
  --dark-global-warning-onAction-pressed: #000000;
  --dark-global-warning-onMuted-default: #fccb58;
  --dark-global-warning-onMuted-hover: #fdda89;
  --dark-global-warning-onMuted-pressed: #fee8b6;
  --desktop-type-body-fontSizes-lg: 16px;
  --desktop-type-body-fontSizes-md: 14px;
  --desktop-type-body-fontSizes-sm: 12px;
  --desktop-type-body-fontSizes-xs: 10px;
  --desktop-type-body-fontStack: "ABC Oracle Plus Variable", -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
    arial, sans-serif;
  --desktop-type-body-fontWeights-bold: 550;
  --desktop-type-body-fontWeights-normal: 337;
  --desktop-type-body-letterSpacing: -0.01em;
  --desktop-type-body-lineHeight: 1.4em;
  --desktop-type-dataBody-fontSizes-lg: 16px;
  --desktop-type-dataBody-fontSizes-md: 14px;
  --desktop-type-dataBody-fontSizes-sm: 12px;
  --desktop-type-dataBody-fontSizes-xs: 10px;
  --desktop-type-dataBody-fontStack: "ABC Oracle Plus Variable", ui-monospace, menlo, monaco, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", monospace;
  --desktop-type-dataBody-fontWeights-bold: 550;
  --desktop-type-dataBody-fontWeights-normal: 337;
  --desktop-type-dataBody-fontWidth: "TRIP" 0.5;
  --desktop-type-dataBody-letterSpacing: 0.04em;
  --desktop-type-dataBody-lineHeight: 1.4em;
  --desktop-type-dataDisplay-fontSizes-lg: 40px;
  --desktop-type-dataDisplay-fontSizes-md: 32px;
  --desktop-type-dataDisplay-fontSizes-xl: 48px;
  --desktop-type-dataDisplay-fontSizes-xxl: 60px;
  --desktop-type-dataDisplay-fontSizes-xxxl: 80px;
  --desktop-type-dataDisplay-fontStack: "ABC Oracle Plus Variable", ui-monospace, menlo, monaco, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", monospace;
  --desktop-type-dataDisplay-fontWeights-light: 200;
  --desktop-type-dataDisplay-fontWeights-medium: 500;
  --desktop-type-dataDisplay-fontWeights-normal: 337;
  --desktop-type-dataDisplay-fontWidth: "TRIP" 0.5;
  --desktop-type-dataDisplay-letterSpacing: 0.06em;
  --desktop-type-dataDisplay-lineHeight: 1.2em;
  --desktop-type-dataHeading-fontSizes-lg: 22px;
  --desktop-type-dataHeading-fontSizes-md: 16px;
  --desktop-type-dataHeading-fontSizes-sm: 14px;
  --desktop-type-dataHeading-fontSizes-xl: 26px;
  --desktop-type-dataHeading-fontSizes-xs: 12px;
  --desktop-type-dataHeading-fontStack: "ABC Oracle Plus Variable", ui-monospace, menlo, monaco, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", monospace;
  --desktop-type-dataHeading-fontWeights-light: 200;
  --desktop-type-dataHeading-fontWeights-medium: 500;
  --desktop-type-dataHeading-fontWeights-normal: 337;
  --desktop-type-dataHeading-fontWidth: "TRIP" 0.5;
  --desktop-type-dataHeading-letterSpacing: 0.04em;
  --desktop-type-dataHeading-lineHeight: 1.3em;
  --desktop-type-display-fontSizes-lg: 40px;
  --desktop-type-display-fontSizes-md: 32px;
  --desktop-type-display-fontSizes-xl: 48px;
  --desktop-type-display-fontSizes-xxl: 60px;
  --desktop-type-display-fontSizes-xxxl: 80px;
  --desktop-type-display-fontStack: "ABC Oracle Plus Variable", -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
    arial, sans-serif;
  --desktop-type-display-fontWeights-light: 200;
  --desktop-type-display-fontWeights-medium: 500;
  --desktop-type-display-fontWeights-normal: 337;
  --desktop-type-display-letterSpacing: -0.03em;
  --desktop-type-display-lineHeight: 1.2em;
  --desktop-type-heading-fontSizes-lg: 22px;
  --desktop-type-heading-fontSizes-md: 16px;
  --desktop-type-heading-fontSizes-sm: 14px;
  --desktop-type-heading-fontSizes-xl: 26px;
  --desktop-type-heading-fontSizes-xs: 12px;
  --desktop-type-heading-fontStack: "ABC Oracle Plus Variable", -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
    arial, sans-serif;
  --desktop-type-heading-fontWeights-light: 200;
  --desktop-type-heading-fontWeights-medium: 500;
  --desktop-type-heading-fontWeights-normal: 337;
  --desktop-type-heading-letterSpacing: -0.02em;
  --desktop-type-heading-lineHeight: 1.3em;
  --light-component-button-action-default: #0d0d0d;
  --light-component-button-action-hover: #252525;
  --light-component-button-action-pressed: #4a4a4a;
  --light-component-button-onAction-default: #ffffff;
  --light-component-button-onAction-hover: #ffffff;
  --light-component-button-onAction-pressed: #ffffff;
  --light-global-bg-base-default: #ffffff;
  --light-global-bg-base-hover: #e8e8e8;
  --light-global-bg-base-pressed: #dbdbdb;
  --light-global-bg-baseAlt-default: #f5f5f5;
  --light-global-bg-baseAlt-hover: #e8e8e8;
  --light-global-bg-baseAlt-pressed: #dbdbdb;
  --light-global-bg-elevated-default: #ffffff;
  --light-global-bg-elevated-hover: #f5f5f5;
  --light-global-bg-elevated-pressed: #e8e8e8;
  --light-global-bg-page-default: #f5f5f5;
  --light-global-bg-page-hover: #e8e8e8;
  --light-global-bg-page-pressed: #dbdbdb;
  --light-global-bg-pageAlt-default: #ffffff;
  --light-global-bg-pageAlt-hover: #f5f5f5;
  --light-global-bg-pageAlt-pressed: #e8e8e8;
  --light-global-border-action-default: rgb(0 0 0 / 20%);
  --light-global-border-action-hover: rgb(0 0 0 / 28%);
  --light-global-border-action-pressed: rgb(0 0 0 / 35%);
  --light-global-border-muted-default: rgb(0 0 0 / 9%);
  --light-global-border-muted-hover: rgb(0 0 0 / 14%);
  --light-global-border-muted-pressed: rgb(0 0 0 / 20%);
  --light-global-content-inverted-default: #ffffff;
  --light-global-content-inverted-hover: rgb(255 255 255 / 93%);
  --light-global-content-inverted-pressed: rgb(255 255 255 / 87%);
  --light-global-content-invertedMuted-default: rgb(255 255 255 / 60%);
  --light-global-content-invertedMuted-hover: rgb(255 255 255 / 53%);
  --light-global-content-invertedMuted-pressed: rgb(255 255 255 / 46%);
  --light-global-content-invertedSubtle-default: rgb(255 255 255 / 39%);
  --light-global-content-invertedSubtle-hover: rgb(255 255 255 / 46%);
  --light-global-content-invertedSubtle-pressed: rgb(255 255 255 / 53%);
  --light-global-content-muted-default: rgb(0 0 0 / 60%);
  --light-global-content-muted-hover: rgb(0 0 0 / 51%);
  --light-global-content-muted-pressed: rgb(0 0 0 / 43%);
  --light-global-content-regular-default: #000000;
  --light-global-content-regular-hover: rgb(0 0 0 / 95%);
  --light-global-content-regular-pressed: rgb(0 0 0 / 90%);
  --light-global-content-subtle-default: rgb(0 0 0 / 43%);
  --light-global-content-subtle-hover: rgb(0 0 0 / 51%);
  --light-global-content-subtle-pressed: rgb(0 0 0 / 60%);
  --light-global-critical-action-default: #e54059;
  --light-global-critical-action-hover: #c6374d;
  --light-global-critical-action-pressed: #a72f41;
  --light-global-critical-muted-default: rgb(198 55 77 / 13%);
  --light-global-critical-muted-hover: rgb(198 55 77 / 20%);
  --light-global-critical-muted-pressed: rgb(198 55 77 / 27%);
  --light-global-critical-onAction-default: #ffffff;
  --light-global-critical-onAction-hover: #feecef;
  --light-global-critical-onAction-pressed: #fedee2;
  --light-global-critical-onMuted-default: #a72f41;
  --light-global-critical-onMuted-hover: #8a2736;
  --light-global-critical-onMuted-pressed: #6e1f2b;
  --light-global-primary-action-default: #0b69b7;
  --light-global-primary-action-hover: #0d7cd8;
  --light-global-primary-action-pressed: #1c8eec;
  --light-global-primary-actionBase-default: #0d7cd8;
  --light-global-primary-actionBase-hover: #0b69b7;
  --light-global-primary-actionBase-pressed: #095696;
  --light-global-primary-muted-default: rgb(0 0 0 / 9%);
  --light-global-primary-muted-hover: rgb(0 0 0 / 14%);
  --light-global-primary-muted-pressed: rgb(0 0 0 / 20%);
  --light-global-primary-onActionBase-default: #ffffff;
  --light-global-primary-onActionBase-hover: #e7f3fd;
  --light-global-primary-onActionBase-pressed: #d4e9fb;
  --light-global-primary-onMuted-default: #000000;
  --light-global-primary-onMuted-hover: #000000;
  --light-global-primary-onMuted-pressed: #000000;
  --light-global-primary-onSubtle-default: rgb(0 0 0 / 60%);
  --light-global-primary-onSubtle-hover: rgb(0 0 0 / 68%);
  --light-global-primary-onSubtle-pressed: rgb(0 0 0 / 76%);
  --light-global-primary-subtle-default: rgb(0 0 0 / 4%);
  --light-global-primary-subtle-hover: rgb(0 0 0 / 9%);
  --light-global-primary-subtle-pressed: rgb(0 0 0 / 14%);
  --light-global-secondary-action-default: rgb(0 0 0 / 9%);
  --light-global-secondary-action-hover: rgb(0 0 0 / 14%);
  --light-global-secondary-action-pressed: rgb(0 0 0 / 20%);
  --light-global-secondary-muted-default: rgb(0 0 0 / 4%);
  --light-global-secondary-muted-hover: rgb(0 0 0 / 9%);
  --light-global-secondary-muted-pressed: rgb(0 0 0 / 14%);
  --light-global-secondary-onAction-default: #000000;
  --light-global-secondary-onAction-hover: #000000;
  --light-global-secondary-onAction-pressed: #000000;
  --light-global-secondary-onMuted-default: rgb(0 0 0 / 60%);
  --light-global-secondary-onMuted-hover: rgb(0 0 0 / 68%);
  --light-global-secondary-onMuted-pressed: rgb(0 0 0 / 76%);
  --light-global-success-action-default: #097d3f;
  --light-global-success-action-hover: #076232;
  --light-global-success-action-pressed: #054724;
  --light-global-success-muted-default: rgb(13 180 91 / 13%);
  --light-global-success-muted-hover: rgb(13 180 91 / 20%);
  --light-global-success-muted-pressed: rgb(13 180 91 / 27%);
  --light-global-success-onAction-default: #ffffff;
  --light-global-success-onAction-hover: rgb(255 255 255 / 93%);
  --light-global-success-onAction-pressed: rgb(255 255 255 / 87%);
  --light-global-success-onMuted-default: #097d3f;
  --light-global-success-onMuted-hover: #076232;
  --light-global-success-onMuted-pressed: #054724;
  --light-global-warning-action-default: #c38b08;
  --light-global-warning-action-hover: #a07206;
  --light-global-warning-action-pressed: #7d5905;
  --light-global-warning-muted-default: rgb(230 164 9 / 13%);
  --light-global-warning-muted-hover: rgb(230 164 9 / 20%);
  --light-global-warning-muted-pressed: rgb(230 164 9 / 27%);
  --light-global-warning-onAction-default: #ffffff;
  --light-global-warning-onAction-hover: #fff7e6;
  --light-global-warning-onAction-pressed: #fef1d3;
  --light-global-warning-onMuted-default: #7d5905;
  --light-global-warning-onMuted-hover: #5a4004;
  --light-global-warning-onMuted-pressed: #372702;
  --mobile-type-body-fontSizes-lg: 18px;
  --mobile-type-body-fontSizes-md: 16px;
  --mobile-type-body-fontSizes-sm: 14px;
  --mobile-type-body-fontSizes-xs: 12px;
  --mobile-type-body-fontStack: "ABC Oracle Plus Variable", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, arial,
    sans-serif;
  --mobile-type-body-fontWeights-bold: 550;
  --mobile-type-body-fontWeights-normal: 337;
  --mobile-type-body-letterSpacing: -0.01em;
  --mobile-type-body-lineHeight: 1.4em;
  --mobile-type-dataBody-fontSizes-lg: 18px;
  --mobile-type-dataBody-fontSizes-md: 16px;
  --mobile-type-dataBody-fontSizes-sm: 14px;
  --mobile-type-dataBody-fontSizes-xs: 12px;
  --mobile-type-dataBody-fontStack: "ABC Oracle Plus Variable", ui-monospace, menlo, monaco, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", monospace;
  --mobile-type-dataBody-fontWeights-bold: 550;
  --mobile-type-dataBody-fontWeights-normal: 337;
  --mobile-type-dataBody-fontWidth: "TRIP" 0.5;
  --mobile-type-dataBody-letterSpacing: 0.04em;
  --mobile-type-dataBody-lineHeight: 1.4em;
  --mobile-type-dataDisplay-fontSizes-lg: 36px;
  --mobile-type-dataDisplay-fontSizes-md: 30px;
  --mobile-type-dataDisplay-fontSizes-xl: 42px;
  --mobile-type-dataDisplay-fontSizes-xxl: 60px;
  --mobile-type-dataDisplay-fontSizes-xxxl: 80px;
  --mobile-type-dataDisplay-fontStack: "ABC Oracle Plus Variable", ui-monospace, menlo, monaco, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", monospace;
  --mobile-type-dataDisplay-fontWeights-light: 200;
  --mobile-type-dataDisplay-fontWeights-medium: 500;
  --mobile-type-dataDisplay-fontWeights-normal: 337;
  --mobile-type-dataDisplay-fontWidth: "TRIP" 0.5;
  --mobile-type-dataDisplay-letterSpacing: 0.06em;
  --mobile-type-dataDisplay-lineHeight: 1.2em;
  --mobile-type-dataHeading-fontSizes-lg: 22px;
  --mobile-type-dataHeading-fontSizes-md: 18px;
  --mobile-type-dataHeading-fontSizes-sm: 16px;
  --mobile-type-dataHeading-fontSizes-xl: 26px;
  --mobile-type-dataHeading-fontSizes-xs: 14px;
  --mobile-type-dataHeading-fontStack: "ABC Oracle Plus Variable", ui-monospace, menlo, monaco, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", monospace;
  --mobile-type-dataHeading-fontWeights-light: 200;
  --mobile-type-dataHeading-fontWeights-medium: 500;
  --mobile-type-dataHeading-fontWeights-normal: 337;
  --mobile-type-dataHeading-fontWidth: "TRIP" 0.5;
  --mobile-type-dataHeading-letterSpacing: 0.04em;
  --mobile-type-dataHeading-lineHeight: 1.3em;
  --mobile-type-display-fontSizes-lg: 36px;
  --mobile-type-display-fontSizes-md: 30px;
  --mobile-type-display-fontSizes-xl: 42px;
  --mobile-type-display-fontSizes-xxl: 60px;
  --mobile-type-display-fontSizes-xxxl: 80px;
  --mobile-type-display-fontStack: "ABC Oracle Plus Variable", -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
    arial, sans-serif;
  --mobile-type-display-fontWeights-light: 200;
  --mobile-type-display-fontWeights-medium: 500;
  --mobile-type-display-fontWeights-normal: 337;
  --mobile-type-display-letterSpacing: -0.03em;
  --mobile-type-display-lineHeight: 1.2em;
  --mobile-type-heading-fontSizes-lg: 22px;
  --mobile-type-heading-fontSizes-md: 18px;
  --mobile-type-heading-fontSizes-sm: 16px;
  --mobile-type-heading-fontSizes-xl: 26px;
  --mobile-type-heading-fontSizes-xs: 14px;
  --mobile-type-heading-fontStack: "ABC Oracle Plus Variable", -apple-system, blinkmacsystemfont, "Segoe UI", roboto,
    arial, sans-serif;
  --mobile-type-heading-fontWeights-light: 200;
  --mobile-type-heading-fontWeights-medium: 500;
  --mobile-type-heading-fontWeights-normal: 337;
  --mobile-type-heading-letterSpacing: -0.02em;
  --mobile-type-heading-lineHeight: 1.3em;
  --shared-global-borderWidth-none: 0;
  --shared-global-borderWidth-thick: 2px;
  --shared-global-borderWidth-thin: 1px;
  --shared-global-boxShadow-high: 0px 6px 24px 0px rgb(0 0 0 / 14%);
  --shared-global-boxShadow-low: 0px 1px 4px 0px rgb(0 0 0 / 6%);
  --shared-global-boxShadow-mid: 0px 4px 14px 0px rgb(0 0 0 / 10%);
  --shared-global-boxShadow-subtle: 0px 1px 4px 0px rgb(0 0 0 / 10%);
  --shared-global-brand-discord: #5865f2;
  --shared-global-brand-facebook: #1877f2;
  --shared-global-brand-google: #d9453d;
  --shared-global-brand-memberful: #de5b38;
  --shared-global-brand-patreon: #f1465a;
  --shared-global-brand-pinterest: #e60023;
  --shared-global-brand-reddit: #ff4500;
  --shared-global-brand-spotify: #00db54;
  --shared-global-brand-tumblr: #35465c;
  --shared-global-brand-twitch: #9046ff;
  --shared-global-brand-twitter: #1da1f2;
  --shared-global-brand-youtube: #ff0000;
  --shared-global-brand-youtubeBlack: #282828;
  --shared-global-constant-black-default: #0d0d0d;
  --shared-global-constant-black-hover: #131313;
  --shared-global-constant-black-pressed: #252525;
  --shared-global-constant-blackMuted-default: rgb(0 0 0 / 50%);
  --shared-global-constant-blackMuted-hover: rgb(0 0 0 / 66%);
  --shared-global-constant-blackMuted-pressed: rgb(0 0 0 / 82%);
  --shared-global-constant-blackSubtle-default: rgb(0 0 0 / 14%);
  --shared-global-constant-blackSubtle-hover: rgb(0 0 0 / 20%);
  --shared-global-constant-blackSubtle-pressed: rgb(0 0 0 / 26%);
  --shared-global-constant-white-default: #ffffff;
  --shared-global-constant-white-hover: #f5f5f5;
  --shared-global-constant-white-pressed: #e8e8e8;
  --shared-global-constant-whiteMuted-default: rgb(255 255 255 / 50%);
  --shared-global-constant-whiteMuted-hover: rgb(255 255 255 / 66%);
  --shared-global-constant-whiteMuted-pressed: rgb(255 255 255 / 82%);
  --shared-global-constant-whiteSubtle-default: rgb(255 255 255 / 14%);
  --shared-global-constant-whiteSubtle-hover: rgb(255 255 255 / 20%);
  --shared-global-constant-whiteSubtle-pressed: rgb(255 255 255 / 26%);
  --shared-global-effects-lg: 100px;
  --shared-global-effects-md: 50px;
  --shared-global-effects-sm: 20px;
  --shared-global-icon-lg: 32px;
  --shared-global-icon-md: 24px;
  --shared-global-icon-sm: 20px;
  --shared-global-icon-xl: 40px;
  --shared-global-icon-xs: 16px;
  --shared-global-layer-z0: 0;
  --shared-global-layer-z1: 100;
  --shared-global-layer-z10: 1000;
  --shared-global-layer-z11: 1100;
  --shared-global-layer-z12: 1200;
  --shared-global-layer-z2: 200;
  --shared-global-layer-z20: 2000;
  --shared-global-layer-z3: 300;
  --shared-global-layer-z4: 400;
  --shared-global-layer-z5: 500;
  --shared-global-layer-z6: 600;
  --shared-global-layer-z7: 700;
  --shared-global-layer-z8: 800;
  --shared-global-layer-z9: 900;
  --shared-global-nonSemantic-blueberry: #1a52a7;
  --shared-global-nonSemantic-holly: #0cac7e;
  --shared-global-nonSemantic-honeycomb: #f5b400;
  --shared-global-nonSemantic-jasper: #f75058;
  --shared-global-nonSemantic-lavender: #6e479d;
  --shared-global-nonSemantic-lollipop: #ea1f44;
  --shared-global-nonSemantic-moonshade: #4f71ba;
  --shared-global-nonSemantic-ocean: #1d8acb;
  --shared-global-nonSemantic-pumpkin: #fb790e;
  --shared-global-nonSemantic-raspberry: #be2a61;
  --shared-global-opacity-disabled: 0.6;
  --shared-global-opacity-enabled: 1;
  --shared-global-radius-circle: 9999px;
  --shared-global-radius-lg: 12px;
  --shared-global-radius-md: 8px;
  --shared-global-radius-pill: 9999px;
  --shared-global-radius-sm: 4px;
  --shared-global-radius-smMd: 6px;
  --shared-global-radius-xl: 16px;
  --shared-global-space-x0: 0;
  --shared-global-space-x12: 12px;
  --shared-global-space-x16: 16px;
  --shared-global-space-x20: 20px;
  --shared-global-space-x24: 24px;
  --shared-global-space-x32: 32px;
  --shared-global-space-x4: 4px;
  --shared-global-space-x40: 40px;
  --shared-global-space-x48: 48px;
  --shared-global-space-x56: 56px;
  --shared-global-space-x8: 8px;
  --shared-global-transition-fast-duration: 200ms;
  --shared-global-transition-fast-easing: ease;
  --shared-global-transition-regular-duration: 350ms;
  --shared-global-transition-regular-easing: ease;
  --shared-global-transition-slow-duration: 500ms;
  --shared-global-transition-slow-easing: ease;
}