@patreon/studio
Version:
Patreon Studio Design System
475 lines (472 loc) • 24.3 kB
CSS
/**
* 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;
}