:root { /* Specto UI measurement tokens. Color tokens remain owned by Specto Colors. */ --su-font-size-display-s: 48px; --su-font-size-display-m: 56px; --su-font-size-display-l: 64px; --su-font-size-headline-s: 24px; --su-font-size-headline-m: 32px; --su-font-size-headline-l: 40px; --su-font-size-title-s: 16px; --su-font-size-title-m: 20px; --su-font-size-title-l: 24px; --su-font-size-label-s: 12px; --su-font-size-label-m: 14px; --su-font-size-label-l: 16px; --su-line-height-label-s: 1.33333; --su-line-height-label-m: 1.42857; --su-font-size-body-xs: 12px; --su-font-size-body-s: 14px; --su-font-size-body-m: 16px; --su-font-size-body-l: 18px; --su-font-weight-light: 300; --su-font-weight-normal: 400; --su-font-weight-bold: 500; --su-font-weight-strong: 600; --su-font-family-display: "Specto Sans", sans-serif; --su-font-family-headline: "Specto Sans", sans-serif; --su-font-family-title: "Specto Sans", sans-serif; --su-font-family-label: "Specto Sans", sans-serif; --su-font-family-body: "Specto Sans", sans-serif; --su-space-unit-none: 0px; --su-space-unit-xs: 2px; --su-space-unit-s: 4px; --su-space-unit-m: 8px; --su-space-unit-l: 12px; --su-space-unit-xl: 16px; --su-space-unit-2xl: 20px; --su-space-unit-3xl: 24px; --su-space-block-none: 0px; --su-space-block-xs: 12px; --su-space-block-s: 16px; --su-space-block-m: 24px; --su-space-block-l: 32px; --su-space-block-xl: 40px; --su-space-block-2xl: 48px; --su-space-section-x-none: 0px; --su-space-section-x-s: 32px; --su-space-section-x-m: 48px; --su-space-section-x-l: 64px; --su-space-section-y-none: 0px; --su-space-section-y-xs: 24px; --su-space-section-y-s: 32px; --su-space-section-y-m: 48px; --su-space-section-y-l: 64px; --su-space-section-y-xl: 96px; --su-space-section-y-2xl: 128px; --su-space-section-y-3xl: 192px; --su-size-unit-4xs: 8px; --su-size-unit-3xs: 16px; --su-size-unit-2xs: 20px; --su-size-unit-xs: 24px; --su-size-unit-s: 32px; --su-size-unit-m: 40px; --su-size-unit-l: 48px; --su-size-unit-xl: 56px; --su-size-unit-2xl: 64px; --su-size-unit-3xl: 96px; --su-size-unit-4xl: 160px; --su-size-unit-5xl: 192px; --su-size-block-xs: 80px; --su-size-block-s: 96px; --su-size-block-m: 128px; --su-size-block-l: 160px; --su-size-block-xl: 192px; --su-size-section-xs: 560px; --su-size-section-s: 800px; --su-size-section-m: 1200px; --su-size-section-l: 1440px; --su-size-section-xl: 1600px; --su-radius-unit-none-sharp: 0px; --su-radius-unit-none-soft: 0px; --su-radius-unit-none-rounded: 0px; --su-radius-unit-none-round: 0px; --su-radius-unit-s-sharp: 0px; --su-radius-unit-s-soft: 4px; --su-radius-unit-s-rounded: 8px; --su-radius-unit-s-round: 99999px; --su-radius-unit-m-sharp: 0px; --su-radius-unit-m-soft: 8px; --su-radius-unit-m-rounded: 12px; --su-radius-unit-m-round: 99999px; --su-radius-unit-l-sharp: 0px; --su-radius-unit-l-soft: 12px; --su-radius-unit-l-rounded: 16px; --su-radius-unit-l-round: 99999px; --su-radius-unit-full-sharp: 99999px; --su-radius-unit-full-soft: 99999px; --su-radius-unit-full-rounded: 99999px; --su-radius-unit-full-round: 99999px; --su-radius-block-none-sharp: 0px; --su-radius-block-none-soft: 0px; --su-radius-block-none-rounded: 0px; --su-radius-block-none-round: 0px; --su-radius-block-s-sharp: 0px; --su-radius-block-s-soft: 8px; --su-radius-block-s-rounded: 12px; --su-radius-block-s-round: 16px; --su-radius-block-m-sharp: 0px; --su-radius-block-m-soft: 12px; --su-radius-block-m-rounded: 16px; --su-radius-block-m-round: 24px; --su-radius-block-l-sharp: 0px; --su-radius-block-l-soft: 12px; --su-radius-block-l-rounded: 24px; --su-radius-block-l-round: 32px; --su-radius-block-full-sharp: 99999px; --su-radius-block-full-soft: 99999px; --su-radius-block-full-rounded: 99999px; --su-radius-block-full-round: 99999px; --su-radius-section-none-sharp: 0px; --su-radius-section-none-soft: 0px; --su-radius-section-none-rounded: 0px; --su-radius-section-none-round: 0px; --su-radius-section-s-sharp: 0px; --su-radius-section-s-soft: 16px; --su-radius-section-s-rounded: 24px; --su-radius-section-s-round: 32px; --su-radius-section-m-sharp: 0px; --su-radius-section-m-soft: 24px; --su-radius-section-m-rounded: 32px; --su-radius-section-m-round: 48px; --su-radius-section-l-sharp: 0px; --su-radius-section-l-soft: 32px; --su-radius-section-l-rounded: 48px; --su-radius-section-l-round: 64px; --su-radius-none: 0px; --su-radius-s: var(--su-radius-unit-s-soft, 4px); --su-radius-m: var(--su-radius-unit-m-soft, 8px); --su-radius-l: var(--su-radius-unit-l-soft, 12px); --su-radius-full: var(--su-radius-unit-full-round, 99999px); /* Shape aliases are component-aware. */ --su-shape-btn-default-s: var(--su-radius-full); --su-shape-btn-default-m: var(--su-radius-full); --su-shape-btn-default-l: var(--su-radius-full); --su-shape-btn-icon-s: var(--su-radius-full); --su-shape-btn-icon-m: var(--su-radius-full); --su-shape-btn-icon-l: var(--su-radius-full); /* Shape aliases follow shape-tokens.json scale/size/rounding layers. */ --specto-ui-shape-scale: unit; --specto-ui-shape-size: full; --specto-ui-shape: soft; --specto-ui-radius-none-sharp: var(--su-radius-unit-none-sharp, 0px); --specto-ui-radius-none-soft: var(--su-radius-unit-none-soft, 0px); --specto-ui-radius-none-rounded: var(--su-radius-unit-none-rounded, 0px); --specto-ui-radius-none-round: var(--su-radius-unit-none-round, 0px); --specto-ui-radius-s-sharp: var(--su-radius-unit-s-sharp, 0px); --specto-ui-radius-s-soft: var(--su-radius-unit-s-soft, 4px); --specto-ui-radius-s-rounded: var(--su-radius-unit-s-rounded, 8px); --specto-ui-radius-s-round: var(--su-radius-unit-s-round, 99999px); --specto-ui-radius-m-sharp: var(--su-radius-unit-m-sharp, 0px); --specto-ui-radius-m-soft: var(--su-radius-unit-m-soft, 8px); --specto-ui-radius-m-rounded: var(--su-radius-unit-m-rounded, 12px); --specto-ui-radius-m-round: var(--su-radius-unit-m-round, 99999px); --specto-ui-radius-l-sharp: var(--su-radius-unit-l-sharp, 0px); --specto-ui-radius-l-soft: var(--su-radius-unit-l-soft, 12px); --specto-ui-radius-l-rounded: var(--su-radius-unit-l-rounded, 16px); --specto-ui-radius-l-round: var(--su-radius-unit-l-round, 99999px); --specto-ui-radius-full-sharp: var(--su-radius-unit-full-sharp, 99999px); --specto-ui-radius-full-soft: var(--su-radius-unit-full-soft, 99999px); --specto-ui-radius-full-rounded: var(--su-radius-unit-full-rounded, 99999px); --specto-ui-radius-full-round: var(--su-radius-unit-full-round, 99999px); /* * Root shape radius fallbacks stay on the medium unit baseline so direct * element overrides (for example a root Button rounding override) resolve to * a visible non-pill radius even when no size-specific override was emitted. */ --specto-ui-shape-radius-sharp: var(--specto-ui-radius-m-sharp); --specto-ui-shape-radius-soft: var(--specto-ui-radius-m-soft); --specto-ui-shape-radius-rounded: var(--specto-ui-radius-m-rounded); --specto-ui-shape-radius-round: var(--specto-ui-radius-m-round); --specto-ui-shape-radius-context: var(--specto-ui-shape-radius-soft); --specto-ui-shape-radius-unit-s: var(--specto-ui-radius-s-soft); /* Surfaces can be multi-line, so Round degrades to Rounded for them. */ --specto-ui-shape-radius-surface: var(--specto-ui-shape-radius-soft); --specto-ui-shape-radius-unit: var(--specto-ui-shape-radius-context); --specto-ui-shape-radius-block: var(--su-radius-block-m-rounded, 16px); --specto-ui-shape-radius-section: var(--su-radius-section-m-rounded, 32px); --specto-ui-shape-radius: var(--specto-ui-shape-radius-unit); --specto-ui-shape-radius-fallback: var(--specto-ui-shape-radius-unit); --specto-ui-button-radius-fallback: var(--specto-ui-shape-radius-unit); /* * Elevation tokens are size-based so components can share one shadow * contract and pick the appropriate stack by size. */ --specto-ui-elevation-s: 0 2px 6px 0 var(--sc-eff-reg-sec-def, rgb(0 0 0 / 8%)), 0 1px 2px 0 var(--sc-eff-reg-pri-def, rgb(0 0 0 / 6%)); --specto-ui-elevation-m: 0 6px 16px -2px var(--sc-eff-reg-ter-def, rgb(0 0 0 / 12%)), 0 2px 4px 0 var(--sc-eff-reg-sec-def, rgb(0 0 0 / 8%)); } [data-su-shape='sharp'], [data-specto-ui-shape='sharp'], [data-specto-ui-rounding='sharp'], :where([style*='--su-shape:sharp']), :where([style*='--su-shape: sharp']) { --su-shape: sharp; --specto-ui-shape: sharp; --specto-ui-shape-radius-context: var(--specto-ui-shape-radius-sharp); --specto-ui-shape-radius-unit-s: var(--specto-ui-radius-s-sharp); --specto-ui-shape-radius-surface: var(--specto-ui-shape-radius-sharp); --specto-ui-shape-radius-unit: var(--specto-ui-shape-radius-context); --specto-ui-shape-radius: var(--specto-ui-shape-radius-context); --su-shape-btn-default-s: var(--su-radius-none); --su-shape-btn-default-m: var(--su-radius-none); --su-shape-btn-default-l: var(--su-radius-none); --su-shape-btn-icon-s: var(--su-radius-none); --su-shape-btn-icon-m: var(--su-radius-none); --su-shape-btn-icon-l: var(--su-radius-none); } [data-su-shape='soft'], [data-specto-ui-shape='soft'], [data-specto-ui-rounding='soft'], :where([style*='--su-shape:soft']), :where([style*='--su-shape: soft']) { --su-shape: soft; --specto-ui-shape: soft; --specto-ui-shape-radius-context: var(--specto-ui-shape-radius-soft); --specto-ui-shape-radius-unit-s: var(--specto-ui-radius-s-soft); --specto-ui-shape-radius-surface: var(--specto-ui-shape-radius-soft); --specto-ui-shape-radius-unit: var(--specto-ui-shape-radius-context); --specto-ui-shape-radius: var(--specto-ui-shape-radius-context); --su-shape-btn-default-s: var(--su-radius-s); --su-shape-btn-default-m: var(--su-radius-m); --su-shape-btn-default-l: var(--su-radius-l); --su-shape-btn-icon-s: var(--su-radius-s); --su-shape-btn-icon-m: var(--su-radius-m); --su-shape-btn-icon-l: var(--su-radius-l); } [data-su-shape='rounded'], [data-specto-ui-shape='rounded'], [data-specto-ui-rounding='rounded'], :where([style*='--su-shape:rounded']), :where([style*='--su-shape: rounded']) { --su-shape: rounded; --specto-ui-shape: rounded; --specto-ui-shape-radius-context: var(--specto-ui-shape-radius-rounded); --specto-ui-shape-radius-unit-s: var(--specto-ui-radius-s-rounded); --specto-ui-shape-radius-surface: var(--specto-ui-shape-radius-rounded); --specto-ui-shape-radius-unit: var(--specto-ui-shape-radius-context); --specto-ui-shape-radius: var(--specto-ui-shape-radius-context); --su-shape-btn-default-s: var(--su-radius-s); --su-shape-btn-default-m: var(--su-radius-m); --su-shape-btn-default-l: var(--su-radius-m); --su-shape-btn-icon-s: var(--su-radius-full); --su-shape-btn-icon-m: var(--su-radius-full); --su-shape-btn-icon-l: var(--su-radius-full); } [data-su-shape='round'], [data-specto-ui-shape='round'], [data-specto-ui-rounding='round'], :where([style*='--su-shape:round']), :where([style*='--su-shape: round']) { --su-shape: round; --specto-ui-shape: round; --specto-ui-shape-radius-context: var(--specto-ui-shape-radius-round); --specto-ui-shape-radius-unit-s: var(--specto-ui-radius-s-round); --specto-ui-shape-radius-surface: var(--specto-ui-shape-radius-rounded); --specto-ui-shape-radius-unit: var(--specto-ui-shape-radius-context); --specto-ui-shape-radius: var(--specto-ui-shape-radius-context); --su-shape-btn-default-s: var(--su-radius-full); --su-shape-btn-default-m: var(--su-radius-full); --su-shape-btn-default-l: var(--su-radius-full); --su-shape-btn-icon-s: var(--su-radius-full); --su-shape-btn-icon-m: var(--su-radius-full); --su-shape-btn-icon-l: var(--su-radius-full); } [data-specto-ui-context-enabled='true'][data-specto-ui-scale='unit'] { --specto-ui-shape-scale: unit; --specto-ui-radius-none-sharp: var(--su-radius-unit-none-sharp, 0px); --specto-ui-radius-none-soft: var(--su-radius-unit-none-soft, 0px); --specto-ui-radius-none-rounded: var(--su-radius-unit-none-rounded, 0px); --specto-ui-radius-none-round: var(--su-radius-unit-none-round, 0px); --specto-ui-radius-s-sharp: var(--su-radius-unit-s-sharp, 0px); --specto-ui-radius-s-soft: var(--su-radius-unit-s-soft, 4px); --specto-ui-radius-s-rounded: var(--su-radius-unit-s-rounded, 8px); --specto-ui-radius-s-round: var(--su-radius-unit-s-round, 99999px); --specto-ui-radius-m-sharp: var(--su-radius-unit-m-sharp, 0px); --specto-ui-radius-m-soft: var(--su-radius-unit-m-soft, 8px); --specto-ui-radius-m-rounded: var(--su-radius-unit-m-rounded, 12px); --specto-ui-radius-m-round: var(--su-radius-unit-m-round, 99999px); --specto-ui-radius-l-sharp: var(--su-radius-unit-l-sharp, 0px); --specto-ui-radius-l-soft: var(--su-radius-unit-l-soft, 12px); --specto-ui-radius-l-rounded: var(--su-radius-unit-l-rounded, 16px); --specto-ui-radius-l-round: var(--su-radius-unit-l-round, 99999px); --specto-ui-radius-full-sharp: var(--su-radius-unit-full-sharp, 99999px); --specto-ui-radius-full-soft: var(--su-radius-unit-full-soft, 99999px); --specto-ui-radius-full-rounded: var(--su-radius-unit-full-rounded, 99999px); --specto-ui-radius-full-round: var(--su-radius-unit-full-round, 99999px); } [data-specto-ui-context-enabled='true'][data-specto-ui-scale='block'] { --specto-ui-shape-scale: block; --specto-ui-radius-none-sharp: var(--su-radius-block-none-sharp, 0px); --specto-ui-radius-none-soft: var(--su-radius-block-none-soft, 0px); --specto-ui-radius-none-rounded: var(--su-radius-block-none-rounded, 0px); --specto-ui-radius-none-round: var(--su-radius-block-none-round, 0px); --specto-ui-radius-s-sharp: var(--su-radius-block-s-sharp, 0px); --specto-ui-radius-s-soft: var(--su-radius-block-s-soft, 8px); --specto-ui-radius-s-rounded: var(--su-radius-block-s-rounded, 12px); --specto-ui-radius-s-round: var(--su-radius-block-s-round, 16px); --specto-ui-radius-m-sharp: var(--su-radius-block-m-sharp, 0px); --specto-ui-radius-m-soft: var(--su-radius-block-m-soft, 12px); --specto-ui-radius-m-rounded: var(--su-radius-block-m-rounded, 16px); --specto-ui-radius-m-round: var(--su-radius-block-m-round, 24px); --specto-ui-radius-l-sharp: var(--su-radius-block-l-sharp, 0px); --specto-ui-radius-l-soft: var(--su-radius-block-l-soft, 12px); --specto-ui-radius-l-rounded: var(--su-radius-block-l-rounded, 24px); --specto-ui-radius-l-round: var(--su-radius-block-l-round, 32px); --specto-ui-radius-full-sharp: var(--su-radius-block-full-sharp, 99999px); --specto-ui-radius-full-soft: var(--su-radius-block-full-soft, 99999px); --specto-ui-radius-full-rounded: var(--su-radius-block-full-rounded, 99999px); --specto-ui-radius-full-round: var(--su-radius-block-full-round, 99999px); } [data-specto-ui-context-enabled='true'][data-specto-ui-scale='section'] { --specto-ui-shape-scale: section; --specto-ui-radius-none-sharp: var(--su-radius-section-none-sharp, 0px); --specto-ui-radius-none-soft: var(--su-radius-section-none-soft, 0px); --specto-ui-radius-none-rounded: var(--su-radius-section-none-rounded, 0px); --specto-ui-radius-none-round: var(--su-radius-section-none-round, 0px); --specto-ui-radius-s-sharp: var(--su-radius-section-s-sharp, 0px); --specto-ui-radius-s-soft: var(--su-radius-section-s-soft, 16px); --specto-ui-radius-s-rounded: var(--su-radius-section-s-rounded, 24px); --specto-ui-radius-s-round: var(--su-radius-section-s-round, 32px); --specto-ui-radius-m-sharp: var(--su-radius-section-m-sharp, 0px); --specto-ui-radius-m-soft: var(--su-radius-section-m-soft, 24px); --specto-ui-radius-m-rounded: var(--su-radius-section-m-rounded, 32px); --specto-ui-radius-m-round: var(--su-radius-section-m-round, 48px); --specto-ui-radius-l-sharp: var(--su-radius-section-l-sharp, 0px); --specto-ui-radius-l-soft: var(--su-radius-section-l-soft, 32px); --specto-ui-radius-l-rounded: var(--su-radius-section-l-rounded, 48px); --specto-ui-radius-l-round: var(--su-radius-section-l-round, 64px); --specto-ui-radius-full-sharp: var(--su-radius-section-l-round, 64px); --specto-ui-radius-full-soft: var(--su-radius-section-l-round, 64px); --specto-ui-radius-full-rounded: var(--su-radius-section-l-round, 64px); --specto-ui-radius-full-round: var(--su-radius-section-l-round, 64px); } [data-specto-ui-context-enabled='true'][data-specto-ui-shape='sharp'] { --specto-ui-shape: sharp; --specto-ui-shape-radius-context: var(--specto-ui-shape-radius-sharp); --specto-ui-shape-radius-unit-s: var(--specto-ui-radius-s-sharp); --specto-ui-shape-radius-surface: var(--specto-ui-shape-radius-sharp); --specto-ui-shape-radius-unit: var(--specto-ui-shape-radius-context); --specto-ui-shape-radius: var(--specto-ui-shape-radius-context); } [data-specto-ui-context-enabled='true'][data-specto-ui-shape='soft'] { --specto-ui-shape: soft; --specto-ui-shape-radius-context: var(--specto-ui-shape-radius-soft); --specto-ui-shape-radius-unit-s: var(--specto-ui-radius-s-soft); --specto-ui-shape-radius-surface: var(--specto-ui-shape-radius-soft); --specto-ui-shape-radius-unit: var(--specto-ui-shape-radius-context); --specto-ui-shape-radius: var(--specto-ui-shape-radius-context); } [data-specto-ui-context-enabled='true'][data-specto-ui-shape='rounded'] { --specto-ui-shape: rounded; --specto-ui-shape-radius-context: var(--specto-ui-shape-radius-rounded); --specto-ui-shape-radius-unit-s: var(--specto-ui-radius-s-rounded); --specto-ui-shape-radius-surface: var(--specto-ui-shape-radius-rounded); --specto-ui-shape-radius-unit: var(--specto-ui-shape-radius-context); --specto-ui-shape-radius: var(--specto-ui-shape-radius-context); } [data-specto-ui-context-enabled='true'][data-specto-ui-shape='round'] { --specto-ui-shape: round; --specto-ui-shape-radius-context: var(--specto-ui-shape-radius-round); --specto-ui-shape-radius-unit-s: var(--specto-ui-radius-s-round); --specto-ui-shape-radius-surface: var(--specto-ui-shape-radius-rounded); --specto-ui-shape-radius-unit: var(--specto-ui-shape-radius-context); --specto-ui-shape-radius: var(--specto-ui-shape-radius-context); } @media (min-width: 768px) and (max-width: 991px) { :root { --su-font-size-display-s: 40px; --su-font-size-display-m: 48px; --su-font-size-display-l: 56px; --su-font-size-headline-m: 24px; --su-font-size-headline-l: 32px; --su-font-size-title-l: 20px; --su-space-section-x-m: 40px; --su-space-section-x-l: 48px; --su-space-section-y-m: 40px; --su-space-section-y-l: 56px; --su-space-section-y-xl: 80px; --su-space-section-y-2xl: 96px; --su-space-section-y-3xl: 128px; } } @media (max-width: 767px) { :root { --su-font-size-display-s: 40px; --su-font-size-display-m: 48px; --su-font-size-display-l: 56px; --su-font-size-headline-m: 24px; --su-font-size-headline-l: 32px; --su-font-size-title-l: 20px; --su-space-block-m: 16px; --su-space-block-l: 24px; --su-space-block-xl: 32px; --su-space-block-2xl: 40px; --su-space-section-x-s: 24px; --su-space-section-x-m: 24px; --su-space-section-x-l: 32px; --su-space-section-y-xs: 16px; --su-space-section-y-s: 24px; --su-space-section-y-m: 32px; --su-space-section-y-l: 48px; --su-space-section-y-xl: 64px; --su-space-section-y-2xl: 80px; --su-space-section-y-3xl: 96px; --su-size-block-xl: 160px; } }