@patreon/studio
Version:
Patreon Studio Design System
511 lines (509 loc) • 25.2 kB
CSS
/**
* This file is generated. Do not edit.
* Generated on Fri Nov 07 2025 2:17:21 PM
*/
.definitions {
--dark-global-bg-base-default: #1d1c1c;
--dark-global-bg-base-hover: #272727;
--dark-global-bg-base-pressed: #323131;
--dark-global-bg-baseAlt-default: #272727;
--dark-global-bg-baseAlt-hover: #323131;
--dark-global-bg-baseAlt-pressed: #3d3c3c;
--dark-global-bg-elevated-default: #272727;
--dark-global-bg-elevated-hover: #323131;
--dark-global-bg-elevated-pressed: #3d3c3c;
--dark-global-bg-page-default: #121212;
--dark-global-bg-page-hover: #1d1c1c;
--dark-global-bg-page-pressed: #272727;
--dark-global-bg-pageAlt-default: #020202;
--dark-global-bg-pageAlt-hover: #121212;
--dark-global-bg-pageAlt-pressed: #1d1c1c;
--dark-global-border-action-default: #ffffff42;
--dark-global-border-action-hover: #ffffff52;
--dark-global-border-action-pressed: #ffffff63;
--dark-global-border-muted-default: #ffffff30;
--dark-global-border-muted-hover: #ffffff42;
--dark-global-border-muted-pressed: #ffffff52;
--dark-global-border-strong-default: #ffffff63;
--dark-global-border-strong-hover: #ffffff75;
--dark-global-border-strong-pressed: #ffffff87;
--dark-global-content-critical-default: #fdc7cf;
--dark-global-content-critical-hover: #fedee2;
--dark-global-content-critical-pressed: #feecef;
--dark-global-content-decorative-default: #ffffff63;
--dark-global-content-decorative-hover: #ffffff75;
--dark-global-content-decorative-pressed: #ffffff87;
--dark-global-content-muted-default: #ffffffba;
--dark-global-content-muted-hover: #ffffffcc;
--dark-global-content-muted-pressed: #ffffffde;
--dark-global-content-primary-default: #88bcff;
--dark-global-content-primary-hover: #9dc7ff;
--dark-global-content-primary-pressed: #b1d1ff;
--dark-global-content-regular-default: #ffffff;
--dark-global-content-regular-hover: #ffffffed;
--dark-global-content-regular-pressed: #ffffffde;
--dark-global-content-success-default: #5bd795;
--dark-global-content-success-hover: #8be3b4;
--dark-global-content-success-pressed: #b7edd0;
--dark-global-content-warning-default: #fab719;
--dark-global-content-warning-hover: #fbc036;
--dark-global-content-warning-pressed: #fccb58;
--dark-global-control-action-default: #0d0d0d;
--dark-global-control-action-hover: #131313;
--dark-global-control-action-pressed: #252525;
--dark-global-control-surface-default: #ffffff;
--dark-global-control-surface-hover: #f6f6f6;
--dark-global-control-surface-pressed: #ececec;
--dark-global-critical-onSurface-default: #ffffff;
--dark-global-critical-onSurface-hover: #ffffff;
--dark-global-critical-onSurface-pressed: #ffffff;
--dark-global-critical-onSurfaceMuted-default: #fba3b0;
--dark-global-critical-onSurfaceMuted-hover: #fdc7cf;
--dark-global-critical-onSurfaceMuted-pressed: #fedee2;
--dark-global-critical-surface-default: #e54059;
--dark-global-critical-surface-hover: #f8526b;
--dark-global-critical-surface-pressed: #f9778b;
--dark-global-critical-surfaceMuted-default: #c6374d33;
--dark-global-critical-surfaceMuted-hover: #c6374d44;
--dark-global-critical-surfaceMuted-pressed: #c6374d55;
--dark-global-inverted-decorative-default: #0000006e;
--dark-global-inverted-decorative-hover: #00000082;
--dark-global-inverted-decorative-pressed: #00000099;
--dark-global-inverted-muted-default: #00000099;
--dark-global-inverted-muted-hover: #00000082;
--dark-global-inverted-muted-pressed: #0000006e;
--dark-global-inverted-regular-default: #000000;
--dark-global-inverted-regular-hover: #000000f2;
--dark-global-inverted-regular-pressed: #000000e5;
--dark-global-inverted-surface-default: #ffffff;
--dark-global-inverted-surface-hover: #f5f5f5;
--dark-global-inverted-surface-pressed: #e8e8e8;
--dark-global-primary-onSurface-default: #000000;
--dark-global-primary-onSurface-hover: #000000;
--dark-global-primary-onSurface-pressed: #000000;
--dark-global-primary-onSurfaceMuted-default: #ffffff;
--dark-global-primary-onSurfaceMuted-hover: #ffffff;
--dark-global-primary-onSurfaceMuted-pressed: #ffffff;
--dark-global-primary-onSurfaceSubtle-default: #ffffffab;
--dark-global-primary-onSurfaceSubtle-hover: #ffffffba;
--dark-global-primary-onSurfaceSubtle-pressed: #ffffffcc;
--dark-global-primary-surface-default: #ffffff;
--dark-global-primary-surface-hover: #f2f2f2;
--dark-global-primary-surface-pressed: #dedede;
--dark-global-primary-surfaceMuted-default: #7877766a;
--dark-global-primary-surfaceMuted-hover: #78777680;
--dark-global-primary-surfaceMuted-pressed: #78777695;
--dark-global-primary-surfaceSubtle-default: #78777640;
--dark-global-primary-surfaceSubtle-hover: #78777655;
--dark-global-primary-surfaceSubtle-pressed: #7877766a;
--dark-global-rich-action-default: #d3e4ff;
--dark-global-rich-action-hover: #cbdcf6;
--dark-global-rich-action-pressed: #c2d3ee;
--dark-global-rich-muted-default: #ffffffcc;
--dark-global-rich-muted-hover: #ffffffde;
--dark-global-rich-muted-pressed: #ffffffed;
--dark-global-rich-regular-default: #ffffff;
--dark-global-rich-regular-hover: #ffffffed;
--dark-global-rich-regular-pressed: #ffffffde;
--dark-global-rich-surface-default: #525252;
--dark-global-rich-surface-hover: #5e5e5e;
--dark-global-rich-surface-pressed: #6a6a6a;
--dark-global-rich-surfaceAlt-default: #005495;
--dark-global-rich-surfaceAlt-hover: #146cba;
--dark-global-rich-surfaceAlt-pressed: #146cba;
--dark-global-success-onSurface-default: #000000;
--dark-global-success-onSurface-hover: #000000f2;
--dark-global-success-onSurface-pressed: #000000e5;
--dark-global-success-onSurfaceMuted-default: #5bd795;
--dark-global-success-onSurfaceMuted-hover: #8be3b4;
--dark-global-success-onSurfaceMuted-pressed: #b7edd0;
--dark-global-success-surface-default: #1cc86c;
--dark-global-success-surface-hover: #0db45b;
--dark-global-success-surface-pressed: #0b994d;
--dark-global-success-surfaceMuted-default: #0db45b22;
--dark-global-success-surfaceMuted-hover: #0db45b33;
--dark-global-success-surfaceMuted-pressed: #0db45b44;
--dark-global-warning-onSurface-default: #372702;
--dark-global-warning-onSurface-hover: #191201;
--dark-global-warning-onSurface-pressed: #000000;
--dark-global-warning-onSurfaceMuted-default: #fccb58;
--dark-global-warning-onSurfaceMuted-hover: #fdda89;
--dark-global-warning-onSurfaceMuted-pressed: #fee8b6;
--dark-global-warning-surface-default: #fab719;
--dark-global-warning-surface-hover: #e6a409;
--dark-global-warning-surface-pressed: #c38b08;
--dark-global-warning-surfaceMuted-default: #e6a40922;
--dark-global-warning-surfaceMuted-hover: #e6a40933;
--dark-global-warning-surfaceMuted-pressed: #e6a40944;
--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-global-bg-base-default: #ffffff;
--light-global-bg-base-hover: #f9f9f9;
--light-global-bg-base-pressed: #f4f4f4;
--light-global-bg-baseAlt-default: #f9f9f9;
--light-global-bg-baseAlt-hover: #f4f4f4;
--light-global-bg-baseAlt-pressed: #eeeeee;
--light-global-bg-elevated-default: #ffffff;
--light-global-bg-elevated-hover: #f9f9f9;
--light-global-bg-elevated-pressed: #f4f4f4;
--light-global-bg-page-default: #f9f9f9;
--light-global-bg-page-hover: #f4f4f4;
--light-global-bg-page-pressed: #eeeeee;
--light-global-bg-pageAlt-default: #ffffff;
--light-global-bg-pageAlt-hover: #f9f9f9;
--light-global-bg-pageAlt-pressed: #f4f4f4;
--light-global-border-action-default: #00000033;
--light-global-border-action-hover: #00000047;
--light-global-border-action-pressed: #00000059;
--light-global-border-muted-default: #00000017;
--light-global-border-muted-hover: #00000024;
--light-global-border-muted-pressed: #00000033;
--light-global-border-strong-default: #0000006e;
--light-global-border-strong-hover: #00000082;
--light-global-border-strong-pressed: #00000099;
--light-global-content-critical-default: #c6374d;
--light-global-content-critical-hover: #a72f41;
--light-global-content-critical-pressed: #8a2736;
--light-global-content-decorative-default: #0000006e;
--light-global-content-decorative-hover: #00000082;
--light-global-content-decorative-pressed: #00000099;
--light-global-content-muted-default: #00000099;
--light-global-content-muted-hover: #00000082;
--light-global-content-muted-pressed: #0000006e;
--light-global-content-primary-default: #0060aa;
--light-global-content-primary-hover: #00569a;
--light-global-content-primary-pressed: #004d8a;
--light-global-content-regular-default: #000000;
--light-global-content-regular-hover: #000000f2;
--light-global-content-regular-pressed: #000000e5;
--light-global-content-success-default: #097d3f;
--light-global-content-success-hover: #076232;
--light-global-content-success-pressed: #054724;
--light-global-content-warning-default: #7d5905;
--light-global-content-warning-hover: #5a4004;
--light-global-content-warning-pressed: #372702;
--light-global-control-action-default: #ffffff;
--light-global-control-action-hover: #f5f5f5;
--light-global-control-action-pressed: #e8e8e8;
--light-global-control-surface-default: #000000;
--light-global-control-surface-hover: #111111;
--light-global-control-surface-pressed: #1b1b1b;
--light-global-critical-onSurface-default: #ffffff;
--light-global-critical-onSurface-hover: #ffffff;
--light-global-critical-onSurface-pressed: #ffffff;
--light-global-critical-onSurfaceMuted-default: #a72f41;
--light-global-critical-onSurfaceMuted-hover: #8a2736;
--light-global-critical-onSurfaceMuted-pressed: #6e1f2b;
--light-global-critical-surface-default: #c6374d;
--light-global-critical-surface-hover: #a72f41;
--light-global-critical-surface-pressed: #8a2736;
--light-global-critical-surfaceMuted-default: #c6374d22;
--light-global-critical-surfaceMuted-hover: #c6374d33;
--light-global-critical-surfaceMuted-pressed: #c6374d44;
--light-global-inverted-decorative-default: #ffffff63;
--light-global-inverted-decorative-hover: #ffffff75;
--light-global-inverted-decorative-pressed: #ffffff87;
--light-global-inverted-muted-default: #ffffff99;
--light-global-inverted-muted-hover: #ffffff87;
--light-global-inverted-muted-pressed: #ffffff75;
--light-global-inverted-regular-default: #ffffff;
--light-global-inverted-regular-hover: #ffffffed;
--light-global-inverted-regular-pressed: #ffffffde;
--light-global-inverted-surface-default: #0d0d0d;
--light-global-inverted-surface-hover: #131313;
--light-global-inverted-surface-pressed: #252525;
--light-global-primary-onSurface-default: #ffffff;
--light-global-primary-onSurface-hover: #ffffff;
--light-global-primary-onSurface-pressed: #ffffff;
--light-global-primary-onSurfaceMuted-default: #000000;
--light-global-primary-onSurfaceMuted-hover: #000000;
--light-global-primary-onSurfaceMuted-pressed: #000000;
--light-global-primary-onSurfaceSubtle-default: #00000099;
--light-global-primary-onSurfaceSubtle-hover: #000000ad;
--light-global-primary-onSurfaceSubtle-pressed: #000000c2;
--light-global-primary-surface-default: #000000;
--light-global-primary-surface-hover: #131313;
--light-global-primary-surface-pressed: #1f1f1f;
--light-global-primary-surfaceMuted-default: #5e5e5e2a;
--light-global-primary-surfaceMuted-hover: #5e5e5e40;
--light-global-primary-surfaceMuted-pressed: #5e5e5e55;
--light-global-primary-surfaceSubtle-default: #5e5e5e15;
--light-global-primary-surfaceSubtle-hover: #5e5e5e55;
--light-global-primary-surfaceSubtle-pressed: #5e5e5e6a;
--light-global-rich-action-default: #d3e3ff;
--light-global-rich-action-hover: #cbdbf6;
--light-global-rich-action-pressed: #c2d2ee;
--light-global-rich-muted-default: #ffffffcc;
--light-global-rich-muted-hover: #ffffffde;
--light-global-rich-muted-pressed: #ffffffed;
--light-global-rich-regular-default: #ffffff;
--light-global-rich-regular-hover: #ffffffed;
--light-global-rich-regular-pressed: #ffffffde;
--light-global-rich-surface-default: #525252;
--light-global-rich-surface-hover: #5e5e5e;
--light-global-rich-surface-pressed: #6a6a6a;
--light-global-rich-surfaceAlt-default: #165490;
--light-global-rich-surfaceAlt-hover: #28609d;
--light-global-rich-surfaceAlt-pressed: #376caa;
--light-global-success-onSurface-default: #ffffff;
--light-global-success-onSurface-hover: #ffffffed;
--light-global-success-onSurface-pressed: #ffffffde;
--light-global-success-onSurfaceMuted-default: #097d3f;
--light-global-success-onSurfaceMuted-hover: #076232;
--light-global-success-onSurfaceMuted-pressed: #054724;
--light-global-success-surface-default: #097d3f;
--light-global-success-surface-hover: #076232;
--light-global-success-surface-pressed: #054724;
--light-global-success-surfaceMuted-default: #0db45b22;
--light-global-success-surfaceMuted-hover: #0db45b33;
--light-global-success-surfaceMuted-pressed: #0db45b44;
--light-global-warning-onSurface-default: #ffffff;
--light-global-warning-onSurface-hover: #fff7e6;
--light-global-warning-onSurface-pressed: #fef1d3;
--light-global-warning-onSurfaceMuted-default: #7d5905;
--light-global-warning-onSurfaceMuted-hover: #5a4004;
--light-global-warning-onSurfaceMuted-pressed: #372702;
--light-global-warning-surface-default: #c38b08;
--light-global-warning-surface-hover: #a07206;
--light-global-warning-surface-pressed: #7d5905;
--light-global-warning-surfaceMuted-default: #e6a40922;
--light-global-warning-surfaceMuted-hover: #e6a40933;
--light-global-warning-surfaceMuted-pressed: #e6a40944;
--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 #00000024;
--shared-global-boxShadow-low: 0px 1px 4px 0px #0000000f;
--shared-global-boxShadow-mid: 0px 4px 14px 0px #0000001a;
--shared-global-boxShadow-subtle: 0px 1px 4px 0px #0000001a;
--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: #00000080;
--shared-global-constant-blackMuted-hover: #000000a8;
--shared-global-constant-blackMuted-pressed: #000000d1;
--shared-global-constant-blackSubtle-default: #00000024;
--shared-global-constant-blackSubtle-hover: #00000033;
--shared-global-constant-blackSubtle-pressed: #00000042;
--shared-global-constant-white-default: #ffffff;
--shared-global-constant-white-hover: #f5f5f5;
--shared-global-constant-white-pressed: #e8e8e8;
--shared-global-constant-whiteMuted-default: #ffffff80;
--shared-global-constant-whiteMuted-hover: #ffffffa8;
--shared-global-constant-whiteMuted-pressed: #ffffffd1;
--shared-global-constant-whiteSubtle-default: #ffffff24;
--shared-global-constant-whiteSubtle-hover: #ffffff33;
--shared-global-constant-whiteSubtle-pressed: #ffffff42;
--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-none: 0;
--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;
}