/* GENERATED by scripts/sync-ds-tokens.mjs. Do not edit by hand. * * 1. Wylo DS tokens (primitives, semantic --ds-color-*, component --ds-comp-*, scales), * copied from the DS build. Change them in the DS repo. * 2. wylo-web bridge aliases from src/config/themeBridge.css. * * The server overrides --primary-50 … --primary-900 inline on per community. */ /* ── Wylo DS ─────────────────────────────────────────────────────────────── */ :root { --transparent: transparent; --shade-white: #ffffff; --shade-black: #000000; --app-background: #F8F8FA; --neutral-50: #fafafa; --neutral-100: #f4f4f5; --neutral-200: #e4e4e7; --neutral-300: #d1d1d6; --neutral-400: #a1a1aa; --neutral-500: #71717a; --neutral-600: #52525b; --neutral-700: #3f3f46; --neutral-800: #27272a; --neutral-900: #18181b; --typography-50: #F2F2F2; --typography-100: #D9D9D9; --typography-200: #BFBFBF; --typography-300: #A6A6A6; --typography-400: #8C8C8C; --typography-500: #737373; --typography-600: #595959; --typography-700: #404040; --typography-800: #2B2B2B; --typography-900: #1A1A1A; --dark-50: #3A3D42; --dark-100: #32353A; --dark-200: #2A2D31; --dark-300: #232529; --dark-400: #1D1F23; --dark-500: #17191C; --dark-600: #121315; --dark-700: #0E0F11; --dark-800: #0A0B0C; --dark-900: #060607; --primary-50: #f5f3ff; --primary-100: #ede9fe; --primary-200: #ddd6fe; --primary-300: #c4b5fd; --primary-400: #a78bfa; --primary-500: #8b5cf6; --primary-600: #7c3aed; --primary-700: #6d28d9; --primary-800: #5b21b6; --primary-900: #4c1d95; --success-50: #f0fdf4; --success-100: #dcfce7; --success-200: #bbf7d0; --success-300: #86efac; --success-400: #4ade80; --success-500: #22c55e; --success-600: #16a34a; --success-700: #15803d; --success-800: #166534; --success-900: #14532d; --warning-50: #fefce8; --warning-100: #fef9c3; --warning-200: #fef08a; --warning-300: #fde047; --warning-400: #facc15; --warning-500: #eab308; --warning-600: #ca8a04; --warning-700: #a16207; --warning-800: #854d0e; --warning-900: #713f12; --error-50: #fef2f2; --error-100: #fee2e2; --error-200: #fecaca; --error-300: #fca5a5; --error-400: #f87171; --error-500: #ef4444; --error-600: #dc2626; --error-700: #b91c1c; --error-800: #991b1b; --error-900: #7f1d1d; --interactive-50: #eff6ff; --interactive-100: #dbeafe; --interactive-200: #bfdbfe; --interactive-300: #93c5fd; --interactive-400: #60a5fa; --interactive-500: #3b82f6; --interactive-600: #2563eb; --interactive-700: #1d4ed8; --interactive-800: #1e40af; --interactive-900: #1e3a8a; --trophy-gold: #f59e0b; --trophy-silver: #787878; --trophy-bronze: #b17346; --ds-radius-none: 0; --ds-radius-xs: 2px; --ds-radius-sm: 4px; --ds-radius-md: 6px; --ds-radius-lg: 8px; --ds-radius-xl: 12px; --ds-radius-2xl: 16px; --ds-radius-3xl: 24px; --ds-radius-full: 9999px; --ds-space-0: 0; --ds-space-1: 0.25rem; --ds-space-2: 0.5rem; --ds-space-3: 0.75rem; --ds-space-4: 1rem; --ds-space-5: 1.25rem; --ds-space-6: 1.5rem; --ds-space-7: 1.75rem; --ds-space-8: 2rem; --ds-space-9: 2.25rem; --ds-space-10: 2.5rem; --ds-space-11: 2.75rem; --ds-space-12: 3rem; --ds-space-14: 3.5rem; --ds-space-16: 4rem; --ds-space-20: 5rem; --ds-space-24: 6rem; --ds-space-32: 8rem; --ds-space-40: 10rem; --ds-space-48: 12rem; --ds-space-56: 14rem; --ds-space-64: 16rem; --ds-space-0-5: 0.125rem; --ds-space-1-5: 0.375rem; --ds-space-2-5: 0.625rem; --ds-space-3-5: 0.875rem; --ds-duration-instant: 0ms; --ds-duration-fast: 100ms; --ds-duration-normal: 150ms; --ds-duration-slow: 300ms; --ds-duration-slower: 500ms; --ds-easing-linear: linear; --ds-easing-ease: ease; --ds-easing-ease-in: ease-in; --ds-easing-ease-out: ease-out; --ds-easing-ease-in-out: ease-in-out; --ds-font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --ds-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace; --ds-font-size-2xs: 0.625rem; --ds-font-size-xs: 0.75rem; --ds-font-size-sm: 0.875rem; --ds-font-size-md: 1rem; --ds-font-size-lg: 1.125rem; --ds-font-size-xl: 1.25rem; --ds-font-size-2xl: 1.5rem; --ds-font-size-3xl: 1.75rem; --ds-font-size-4xl: 2rem; --ds-font-size-5xl: 2.5rem; --ds-font-size-6xl: 3rem; --ds-font-weight-regular: 400; --ds-font-weight-medium: 500; --ds-font-weight-semibold: 600; --ds-font-weight-bold: 700; --ds-font-weight-extrabold: 800; --ds-line-height-none: 1; --ds-line-height-tight: 1.25; --ds-line-height-snug: 1.375; --ds-line-height-normal: 1.5; --ds-line-height-relaxed: 1.625; --ds-line-height-loose: 2; --ds-letter-spacing-tighter: -0.05em; --ds-letter-spacing-tight: -0.025em; --ds-letter-spacing-normal: 0em; --ds-letter-spacing-wide: 0.025em; --ds-letter-spacing-wider: 0.05em; --ds-letter-spacing-widest: 0.1em; --ds-typography-display-large-med-font-size: 3rem; --ds-typography-display-large-med-line-height: 3.5rem; --ds-typography-display-large-med-letter-spacing: -0.02em; --ds-typography-display-large-med-font-weight: 500; --ds-typography-display-large-semibold-font-size: 3rem; --ds-typography-display-large-semibold-line-height: 3.5rem; --ds-typography-display-large-semibold-letter-spacing: -0.02em; --ds-typography-display-large-semibold-font-weight: 600; --ds-typography-display-large-bold-font-size: 3rem; --ds-typography-display-large-bold-line-height: 3.5rem; --ds-typography-display-large-bold-letter-spacing: -0.02em; --ds-typography-display-large-bold-font-weight: 700; --ds-typography-display-large-extrabold-font-size: 3rem; --ds-typography-display-large-extrabold-line-height: 3.5rem; --ds-typography-display-large-extrabold-letter-spacing: -0.02em; --ds-typography-display-large-extrabold-font-weight: 800; --ds-typography-h1-med-font-size: 2.5rem; --ds-typography-h1-med-line-height: 3rem; --ds-typography-h1-med-letter-spacing: -0.02em; --ds-typography-h1-med-font-weight: 500; --ds-typography-h1-semibold-font-size: 2.5rem; --ds-typography-h1-semibold-line-height: 3rem; --ds-typography-h1-semibold-letter-spacing: -0.02em; --ds-typography-h1-semibold-font-weight: 600; --ds-typography-h1-bold-font-size: 2.5rem; --ds-typography-h1-bold-line-height: 3rem; --ds-typography-h1-bold-letter-spacing: -0.02em; --ds-typography-h1-bold-font-weight: 700; --ds-typography-h1-extrabold-font-size: 2.5rem; --ds-typography-h1-extrabold-line-height: 3rem; --ds-typography-h1-extrabold-letter-spacing: -0.02em; --ds-typography-h1-extrabold-font-weight: 800; --ds-typography-h2-med-font-size: 2.25rem; --ds-typography-h2-med-line-height: 2.75rem; --ds-typography-h2-med-letter-spacing: -0.02em; --ds-typography-h2-med-font-weight: 500; --ds-typography-h2-semibold-font-size: 2.25rem; --ds-typography-h2-semibold-line-height: 2.75rem; --ds-typography-h2-semibold-letter-spacing: -0.02em; --ds-typography-h2-semibold-font-weight: 600; --ds-typography-h2-bold-font-size: 2.25rem; --ds-typography-h2-bold-line-height: 2.75rem; --ds-typography-h2-bold-letter-spacing: -0.02em; --ds-typography-h2-bold-font-weight: 700; --ds-typography-h2-extrabold-font-size: 2.25rem; --ds-typography-h2-extrabold-line-height: 2.75rem; --ds-typography-h2-extrabold-letter-spacing: -0.02em; --ds-typography-h2-extrabold-font-weight: 800; --ds-typography-h3-med-font-size: 2rem; --ds-typography-h3-med-line-height: 2.5rem; --ds-typography-h3-med-letter-spacing: -0.02em; --ds-typography-h3-med-font-weight: 500; --ds-typography-h3-semibold-font-size: 2rem; --ds-typography-h3-semibold-line-height: 2.5rem; --ds-typography-h3-semibold-letter-spacing: -0.02em; --ds-typography-h3-semibold-font-weight: 600; --ds-typography-h3-bold-font-size: 2rem; --ds-typography-h3-bold-line-height: 2.5rem; --ds-typography-h3-bold-letter-spacing: -0.02em; --ds-typography-h3-bold-font-weight: 700; --ds-typography-h3-extrabold-font-size: 2rem; --ds-typography-h3-extrabold-line-height: 2.5rem; --ds-typography-h3-extrabold-letter-spacing: -0.02em; --ds-typography-h3-extrabold-font-weight: 800; --ds-typography-h4-med-font-size: 1.75rem; --ds-typography-h4-med-line-height: 2.25rem; --ds-typography-h4-med-letter-spacing: -0.02em; --ds-typography-h4-med-font-weight: 500; --ds-typography-h4-semibold-font-size: 1.75rem; --ds-typography-h4-semibold-line-height: 2.25rem; --ds-typography-h4-semibold-letter-spacing: -0.02em; --ds-typography-h4-semibold-font-weight: 600; --ds-typography-h4-bold-font-size: 1.75rem; --ds-typography-h4-bold-line-height: 2.25rem; --ds-typography-h4-bold-letter-spacing: -0.02em; --ds-typography-h4-bold-font-weight: 700; --ds-typography-h4-extrabold-font-size: 1.75rem; --ds-typography-h4-extrabold-line-height: 2.25rem; --ds-typography-h4-extrabold-letter-spacing: -0.02em; --ds-typography-h4-extrabold-font-weight: 800; --ds-typography-h5-med-font-size: 1.5rem; --ds-typography-h5-med-line-height: 2rem; --ds-typography-h5-med-letter-spacing: -0.02em; --ds-typography-h5-med-font-weight: 500; --ds-typography-h5-semibold-font-size: 1.5rem; --ds-typography-h5-semibold-line-height: 2rem; --ds-typography-h5-semibold-letter-spacing: -0.02em; --ds-typography-h5-semibold-font-weight: 600; --ds-typography-h5-bold-font-size: 1.5rem; --ds-typography-h5-bold-line-height: 2rem; --ds-typography-h5-bold-letter-spacing: -0.02em; --ds-typography-h5-bold-font-weight: 700; --ds-typography-h5-extrabold-font-size: 1.5rem; --ds-typography-h5-extrabold-line-height: 2rem; --ds-typography-h5-extrabold-letter-spacing: -0.02em; --ds-typography-h5-extrabold-font-weight: 800; --ds-typography-h6-med-font-size: 1.25rem; --ds-typography-h6-med-line-height: 1.75rem; --ds-typography-h6-med-letter-spacing: -0.02em; --ds-typography-h6-med-font-weight: 500; --ds-typography-h6-semibold-font-size: 1.25rem; --ds-typography-h6-semibold-line-height: 1.75rem; --ds-typography-h6-semibold-letter-spacing: -0.02em; --ds-typography-h6-semibold-font-weight: 600; --ds-typography-h6-bold-font-size: 1.25rem; --ds-typography-h6-bold-line-height: 1.75rem; --ds-typography-h6-bold-letter-spacing: -0.02em; --ds-typography-h6-bold-font-weight: 700; --ds-typography-h6-extrabold-font-size: 1.25rem; --ds-typography-h6-extrabold-line-height: 1.75rem; --ds-typography-h6-extrabold-letter-spacing: -0.02em; --ds-typography-h6-extrabold-font-weight: 800; --ds-typography-para-large-regular-font-size: 1.125rem; --ds-typography-para-large-regular-line-height: 1.75rem; --ds-typography-para-large-regular-font-weight: 400; --ds-typography-para-large-med-font-size: 1.125rem; --ds-typography-para-large-med-line-height: 1.75rem; --ds-typography-para-large-med-font-weight: 500; --ds-typography-para-large-semibold-font-size: 1.125rem; --ds-typography-para-large-semibold-line-height: 1.75rem; --ds-typography-para-large-semibold-font-weight: 600; --ds-typography-para-large-underline-font-size: 1.125rem; --ds-typography-para-large-underline-line-height: 1.75rem; --ds-typography-para-large-underline-font-weight: 400; --ds-typography-para-large-underline-text-decoration: underline; --ds-typography-para-large-strikethrough-font-size: 1.125rem; --ds-typography-para-large-strikethrough-line-height: 1.75rem; --ds-typography-para-large-strikethrough-font-weight: 400; --ds-typography-para-large-strikethrough-text-decoration: line-through; --ds-typography-para-large-italic-font-size: 1.125rem; --ds-typography-para-large-italic-line-height: 1.75rem; --ds-typography-para-large-italic-font-weight: 400; --ds-typography-para-large-italic-font-style: italic; --ds-typography-para-med-regular-font-size: 1rem; --ds-typography-para-med-regular-line-height: 1.5rem; --ds-typography-para-med-regular-font-weight: 400; --ds-typography-para-med-med-font-size: 1rem; --ds-typography-para-med-med-line-height: 1.5rem; --ds-typography-para-med-med-font-weight: 500; --ds-typography-para-med-semibold-font-size: 1rem; --ds-typography-para-med-semibold-line-height: 1.5rem; --ds-typography-para-med-semibold-font-weight: 600; --ds-typography-para-med-underline-font-size: 1rem; --ds-typography-para-med-underline-line-height: 1.5rem; --ds-typography-para-med-underline-font-weight: 400; --ds-typography-para-med-underline-text-decoration: underline; --ds-typography-para-med-strikethrough-font-size: 1rem; --ds-typography-para-med-strikethrough-line-height: 1.5rem; --ds-typography-para-med-strikethrough-font-weight: 400; --ds-typography-para-med-strikethrough-text-decoration: line-through; --ds-typography-para-med-italic-font-size: 1rem; --ds-typography-para-med-italic-line-height: 1.5rem; --ds-typography-para-med-italic-font-weight: 400; --ds-typography-para-med-italic-font-style: italic; --ds-typography-para-small-regular-font-size: 0.875rem; --ds-typography-para-small-regular-line-height: 1.25rem; --ds-typography-para-small-regular-font-weight: 400; --ds-typography-para-small-med-font-size: 0.875rem; --ds-typography-para-small-med-line-height: 1.25rem; --ds-typography-para-small-med-font-weight: 500; --ds-typography-para-small-semibold-font-size: 0.875rem; --ds-typography-para-small-semibold-line-height: 1.25rem; --ds-typography-para-small-semibold-font-weight: 600; --ds-typography-para-small-underline-font-size: 0.875rem; --ds-typography-para-small-underline-line-height: 1.25rem; --ds-typography-para-small-underline-font-weight: 400; --ds-typography-para-small-underline-text-decoration: underline; --ds-typography-para-small-strikethrough-font-size: 0.875rem; --ds-typography-para-small-strikethrough-line-height: 1.25rem; --ds-typography-para-small-strikethrough-font-weight: 400; --ds-typography-para-small-strikethrough-text-decoration: line-through; --ds-typography-para-small-italic-font-size: 0.875rem; --ds-typography-para-small-italic-line-height: 1.25rem; --ds-typography-para-small-italic-font-weight: 400; --ds-typography-para-small-italic-font-style: italic; --ds-typography-para-x-small-regular-font-size: 0.75rem; --ds-typography-para-x-small-regular-line-height: 1.25rem; --ds-typography-para-x-small-regular-font-weight: 400; --ds-typography-para-x-small-med-font-size: 0.75rem; --ds-typography-para-x-small-med-line-height: 1.25rem; --ds-typography-para-x-small-med-font-weight: 500; --ds-typography-para-x-small-semibold-font-size: 0.75rem; --ds-typography-para-x-small-semibold-line-height: 1.25rem; --ds-typography-para-x-small-semibold-font-weight: 600; --ds-typography-para-x-small-underline-font-size: 0.75rem; --ds-typography-para-x-small-underline-line-height: 1.25rem; --ds-typography-para-x-small-underline-font-weight: 400; --ds-typography-para-x-small-underline-text-decoration: underline; --ds-typography-para-x-small-strikethrough-font-size: 0.75rem; --ds-typography-para-x-small-strikethrough-line-height: 1.25rem; --ds-typography-para-x-small-strikethrough-font-weight: 400; --ds-typography-para-x-small-strikethrough-text-decoration: line-through; --ds-typography-para-x-small-italic-font-size: 0.75rem; --ds-typography-para-x-small-italic-line-height: 1.25rem; --ds-typography-para-x-small-italic-font-weight: 400; --ds-typography-para-x-small-italic-font-style: italic; --ds-typography-overline-large-font-size: 0.875rem; --ds-typography-overline-large-line-height: 1.25rem; --ds-typography-overline-large-font-weight: 600; --ds-typography-overline-large-letter-spacing: 1px; --ds-typography-overline-large-text-transform: uppercase; --ds-typography-overline-semibold-font-size: 0.875rem; --ds-typography-overline-semibold-line-height: 1.25rem; --ds-typography-overline-semibold-font-weight: 600; --ds-typography-overline-semibold-letter-spacing: 1px; --ds-typography-overline-semibold-text-transform: uppercase; --ds-typography-overline-semibold-text-align: center; --ds-typography-overline-small-font-size: 0.75rem; --ds-typography-overline-small-line-height: 1rem; --ds-typography-overline-small-font-weight: 500; --ds-typography-overline-small-text-transform: uppercase; --ds-typography-overline-x-small-font-size: 0.625rem; --ds-typography-overline-x-small-line-height: 1rem; --ds-typography-overline-x-small-font-weight: 500; --ds-typography-overline-x-small-text-transform: uppercase; --ds-z-index-hide: -1; --ds-z-index-auto: auto; --ds-z-index-base: 0; --ds-z-index-raised: 1; --ds-z-index-dropdown: 1000; --ds-z-index-sticky: 1100; --ds-z-index-overlay: 1200; --ds-z-index-modal: 1300; --ds-z-index-popover: 1400; --ds-z-index-toast: 1500; --ds-z-index-tooltip: 1600; --ds-comp-control-height-sm: 2rem; --ds-comp-control-height-md: 2.5rem; --ds-comp-control-height-lg: 3rem; --ds-comp-icon-size-xs: 0.75rem; --ds-comp-icon-size-sm: 1rem; --ds-comp-icon-size-md: 1.25rem; --ds-comp-icon-size-lg: 1.5rem; --ds-comp-icon-size-xl: 2rem; --ds-comp-button-padding-x-sm: 0.75rem; --ds-comp-button-padding-x-md: 1rem; --ds-comp-button-padding-x-lg: 1.25rem; --ds-comp-button-gap-sm: 0.375rem; --ds-comp-button-gap-md: 0.5rem; --ds-comp-button-gap-lg: 0.5rem; --ds-comp-button-font-size-sm: 0.875rem; --ds-comp-button-font-size-md: 0.875rem; --ds-comp-button-font-size-lg: 1rem; --ds-comp-button-border-radius: 6px; --ds-comp-button-font-weight: 500; --ds-comp-button-icon-only-size-sm: 2rem; --ds-comp-button-icon-only-size-md: 2.5rem; --ds-comp-button-icon-only-size-lg: 3rem; --ds-comp-input-height-sm: 2.25rem; --ds-comp-input-height-md: 2.75rem; --ds-comp-input-height-lg: 3.5rem; --ds-comp-input-padding-x-sm: 0.625rem; --ds-comp-input-padding-x-md: 0.875rem; --ds-comp-input-padding-x-lg: 1.125rem; --ds-comp-input-font-size-sm: 0.75rem; --ds-comp-input-font-size-md: 0.875rem; --ds-comp-input-font-size-lg: 1rem; --ds-comp-input-border-radius: 12px; --ds-comp-checkbox-size-sm: 1rem; --ds-comp-checkbox-size-md: 1.25rem; --ds-comp-checkbox-border-radius: 4px; --ds-comp-radio-size-sm: 1rem; --ds-comp-radio-size-md: 1.25rem; --ds-comp-switch-track-width-sm: 2rem; --ds-comp-switch-track-width-md: 2rem; --ds-comp-switch-track-height-sm: 1.125rem; --ds-comp-switch-track-height-md: 1.375rem; --ds-comp-switch-thumb-offset: 0.125rem; --ds-comp-switch-thumb-size-sm: 0.875rem; --ds-comp-switch-thumb-size-md: 1.125rem; --ds-comp-switch-thumb-travel-sm: 0.875rem; --ds-comp-switch-thumb-travel-md: 0.625rem; --ds-comp-switch-border-radius: 9999px; --ds-comp-select-border-radius: 12px; --ds-comp-select-popup-border-radius: 8px; --ds-comp-select-item-border-radius: 8px; --ds-comp-select-popup-max-height: 18rem; --ds-comp-select-popup-min-width: 10rem; --ds-comp-dialog-width-sm: 24rem; --ds-comp-dialog-width-md: 32rem; --ds-comp-dialog-width-lg: 48rem; --ds-comp-dialog-border-radius: 24px; --ds-comp-dialog-padding: 1.5rem; --ds-comp-tooltip-max-width: 20rem; --ds-comp-tooltip-border-radius: 8px; --ds-comp-tooltip-padding-x: 0.75rem; --ds-comp-tooltip-padding-y: 0.375rem; --ds-comp-tooltip-font-size: 0.75rem; --ds-comp-popover-border-radius: 8px; --ds-comp-popover-padding: 1rem; --ds-comp-popover-min-width: 12rem; --ds-comp-popover-max-width: 20rem; --ds-comp-tab-padding-x: 0.75rem; --ds-comp-tab-padding-x-pill: 1rem; --ds-comp-tab-padding-y: 0.625rem; --ds-comp-tab-gap: 0.25rem; --ds-comp-tab-font-size: 1rem; --ds-comp-tab-font-weight: 400; --ds-comp-tab-font-weight-active: 400; --ds-comp-tab-indicator-width: 2px; --ds-comp-tab-list-border-width: 1px; --ds-comp-tab-border-radius: 6px; --ds-comp-accordion-padding-x: 1rem; --ds-comp-accordion-padding-y: 1rem; --ds-comp-accordion-gap: 0.5rem; --ds-comp-accordion-border-radius: 8px; --ds-comp-toast-width: 24rem; --ds-comp-toast-border-radius: 8px; --ds-comp-toast-padding: 1rem; --ds-comp-toast-gap: 0.75rem; --ds-comp-separator-thickness: 1px; --ds-comp-collapsible-border-radius: 6px; --ds-comp-collapsible-padding: 1rem; --ds-comp-avatar-size-xs: 1.5rem; --ds-comp-avatar-size-sm: 2rem; --ds-comp-avatar-size-md: 2.5rem; --ds-comp-avatar-size-lg: 3rem; --ds-comp-avatar-size-xl: 4rem; --ds-comp-avatar-border-radius-circle: 9999px; --ds-comp-avatar-border-radius-rounded: 8px; --ds-comp-avatar-font-size-xs: 0.75rem; --ds-comp-avatar-font-size-sm: 0.75rem; --ds-comp-avatar-font-size-md: 0.875rem; --ds-comp-avatar-font-size-lg: 1rem; --ds-comp-avatar-font-size-xl: 1.25rem; --ds-comp-progress-track-height-sm: 0.375rem; --ds-comp-progress-track-height-md: 0.5rem; --ds-comp-progress-track-radius: 9999px; --ds-comp-meter-track-height-sm: 0.375rem; --ds-comp-meter-track-height-md: 0.5rem; --ds-comp-meter-track-radius: 9999px; --ds-comp-toggle-border-radius: 6px; --ds-comp-toggle-padding-x-sm: 0.625rem; --ds-comp-toggle-padding-x-md: 0.75rem; --ds-comp-toggle-padding-x-lg: 1rem; --ds-comp-toggle-padding-y-sm: 0.375rem; --ds-comp-toggle-padding-y-md: 0.5rem; --ds-comp-toggle-padding-y-lg: 0.625rem; --ds-comp-toggle-font-size-sm: 0.75rem; --ds-comp-toggle-font-size-md: 0.875rem; --ds-comp-toggle-font-size-lg: 1rem; --ds-comp-number-field-border-radius: 12px; --ds-comp-number-field-button-size-sm: 1.75rem; --ds-comp-number-field-button-size-md: 2rem; --ds-comp-number-field-button-size-lg: 2.5rem; --ds-comp-otp-field-segment-size-sm: 2.25rem; --ds-comp-otp-field-segment-size-md: 3rem; --ds-comp-otp-field-segment-size-lg: 3.5rem; --ds-comp-otp-field-border-radius: 6px; --ds-comp-otp-field-font-size-sm: 1rem; --ds-comp-otp-field-font-size-md: 1.25rem; --ds-comp-otp-field-font-size-lg: 1.5rem; --ds-comp-otp-field-gap-sm: 0.375rem; --ds-comp-otp-field-gap-md: 0.5rem; --ds-comp-otp-field-gap-lg: 0.625rem; --ds-comp-slider-track-height-sm: 0.25rem; --ds-comp-slider-track-height-md: 0.375rem; --ds-comp-slider-thumb-size-sm: 1rem; --ds-comp-slider-thumb-size-md: 1.25rem; --ds-comp-slider-thumb-border-width: 2px; --ds-comp-slider-track-radius: 9999px; --ds-comp-menu-border-radius: 8px; --ds-comp-menu-padding: 0.25rem; --ds-comp-menu-min-width: 8.25rem; --ds-comp-menu-max-width: 18rem; --ds-comp-menu-item-padding-x: 0.75rem; --ds-comp-menu-item-padding-y: 0.5rem; --ds-comp-menu-item-border-radius: 8px; --ds-comp-menu-font-size-sm: 0.75rem; --ds-comp-menu-font-size-md: 0.875rem; --ds-comp-menu-separator-margin: 0.25rem; --ds-comp-context-menu-border-radius: 8px; --ds-comp-context-menu-padding: 0.25rem; --ds-comp-context-menu-min-width: 8.25rem; --ds-comp-context-menu-item-padding-x: 0.75rem; --ds-comp-context-menu-item-padding-y: 0.5rem; --ds-comp-context-menu-item-border-radius: 8px; --ds-comp-navigation-menu-border-radius: 12px; --ds-comp-navigation-menu-padding: 0.25rem; --ds-comp-navigation-menu-content-padding: 1rem; --ds-comp-navigation-menu-trigger-padding-x: 0.75rem; --ds-comp-navigation-menu-trigger-padding-y: 0.5rem; --ds-comp-navigation-menu-font-size: 0.875rem; --ds-comp-navigation-menu-font-weight: 500; --ds-comp-toolbar-border-radius: 6px; --ds-comp-toolbar-gap: 0.25rem; --ds-comp-toolbar-padding: 0.25rem; --ds-comp-toolbar-height-sm: 2rem; --ds-comp-toolbar-height-md: 2.5rem; --ds-comp-drawer-width-sm: 20rem; --ds-comp-drawer-width-md: 28rem; --ds-comp-drawer-width-lg: 36rem; --ds-comp-drawer-border-radius: 24px; --ds-comp-drawer-padding: 1.5rem; --ds-comp-alert-dialog-width-sm: 22rem; --ds-comp-alert-dialog-width-md: 28rem; --ds-comp-alert-dialog-width-lg: 40rem; --ds-comp-alert-dialog-border-radius: 24px; --ds-comp-alert-dialog-padding: 1.5rem; --ds-comp-preview-card-border-radius: 8px; --ds-comp-preview-card-padding: 1rem; --ds-comp-preview-card-max-width: 20rem; --ds-comp-scroll-area-scrollbar-size: 6px; --ds-comp-scroll-area-scrollbar-radius: 9999px; --ds-comp-combobox-border-radius: 12px; --ds-comp-combobox-popup-border-radius: 8px; --ds-comp-combobox-item-border-radius: 8px; --ds-comp-combobox-popup-max-height: 18rem; --ds-comp-combobox-popup-min-width: 12rem; --ds-comp-autocomplete-border-radius: 12px; --ds-comp-autocomplete-popup-border-radius: 8px; --ds-comp-autocomplete-item-border-radius: 8px; --ds-comp-autocomplete-popup-max-height: 18rem; --ds-comp-autocomplete-popup-min-width: 12rem; } :root, [data-theme="light"] { --ds-color-bg-primary: var(--shade-white); --ds-color-bg-secondary: var(--neutral-100); --ds-color-bg-tertiary: var(--neutral-50); --ds-color-bg-darkest: var(--neutral-900); --ds-color-bg-white: var(--shade-white); --ds-color-bg-inverse: var(--neutral-900); --ds-color-bg-app-background: var(--app-background); --ds-color-bg-overlay-backdrop: linear-gradient(0deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%), rgba(202, 206, 229, 0.10); --ds-color-bg-hover: var(--neutral-50); --ds-color-bg-surface-raised: var(--shade-white); --ds-color-bg-action: var(--primary-fill, var(--primary-600)); --ds-color-bg-action-hover: var(--primary-fill-hover, color-mix(in srgb, var(--ds-color-bg-action) 88%, var(--shade-black))); --ds-color-bg-action-active: var(--primary-fill-active, color-mix(in srgb, var(--ds-color-bg-action) 76%, var(--shade-black))); --ds-color-bg-action-subtle: var(--primary-100); --ds-color-bg-danger: var(--error-600); --ds-color-bg-danger-hover: var(--error-700); --ds-color-bg-danger-active: var(--error-800); --ds-color-bg-neutral-solid: var(--neutral-900); --ds-color-bg-neutral-solid-hover: var(--neutral-700); --ds-color-bg-brand: var(--primary-fill, var(--primary-600)); --ds-color-bg-brand-subtle: var(--primary-50); --ds-color-bg-brand-muted: var(--primary-100); --ds-color-bg-brand-strong: var(--primary-700); --ds-color-bg-info: var(--interactive-600); --ds-color-bg-info-subtle: var(--interactive-100); --ds-color-bg-info-strong: var(--interactive-700); --ds-color-bg-warning: var(--warning-700); --ds-color-bg-warning-subtle: var(--warning-100); --ds-color-bg-warning-strong: var(--warning-800); --ds-color-bg-success: var(--success-700); --ds-color-bg-success-subtle: var(--success-100); --ds-color-bg-success-strong: var(--success-800); --ds-color-bg-error: var(--error-600); --ds-color-bg-error-subtle: var(--error-100); --ds-color-bg-error-strong: var(--error-700); --ds-color-text-primary: var(--typography-900); --ds-color-text-secondary: var(--typography-700); --ds-color-text-tertiary: var(--typography-600); --ds-color-text-quaternary: var(--typography-500); --ds-color-text-link: var(--interactive-600); --ds-color-text-brand: var(--primary-text-light, var(--primary-600)); --ds-color-text-brand-subtle: var(--primary-100); --ds-color-text-brand-strong: var(--primary-700); --ds-color-text-white: var(--shade-white); --ds-color-text-on-brand: var(--primary-on-fill, var(--shade-white)); --ds-color-text-on-neutral-solid: var(--shade-white); --ds-color-text-info: var(--interactive-700); --ds-color-text-info-subtle: var(--interactive-700); --ds-color-text-info-strong: var(--interactive-800); --ds-color-text-success: var(--success-700); --ds-color-text-success-subtle: var(--success-700); --ds-color-text-success-strong: var(--success-800); --ds-color-text-warning: var(--warning-800); --ds-color-text-warning-subtle: var(--warning-800); --ds-color-text-warning-strong: var(--warning-900); --ds-color-text-error: var(--error-700); --ds-color-text-error-subtle: var(--error-700); --ds-color-text-error-strong: var(--error-800); --ds-color-border-primary: var(--neutral-300); --ds-color-border-secondary: var(--neutral-100); --ds-color-border-subtle: var(--neutral-100); --ds-color-border-darkest: var(--neutral-900); --ds-color-border-white: var(--shade-white); --ds-color-border-control: var(--neutral-500); --ds-color-border-active: var(--primary-text-light, var(--primary-600)); --ds-color-border-active-subtle: var(--primary-100); --ds-color-border-focus: var(--interactive-500); --ds-color-border-info: var(--interactive-500); --ds-color-border-info-subtle: var(--interactive-100); --ds-color-border-info-strong: var(--interactive-700); --ds-color-border-success: var(--success-500); --ds-color-border-success-subtle: var(--success-100); --ds-color-border-success-strong: var(--success-700); --ds-color-border-warning: var(--warning-500); --ds-color-border-warning-subtle: var(--warning-100); --ds-color-border-warning-strong: var(--warning-700); --ds-color-border-error: var(--error-500); --ds-color-border-error-subtle: var(--error-100); --ds-color-border-error-strong: var(--error-700); --ds-color-icon-primary: var(--neutral-800); --ds-color-icon-secondary: var(--neutral-500); --ds-color-icon-tertiary: var(--neutral-300); --ds-color-icon-brand: var(--primary-text-light, var(--primary-600)); --ds-color-icon-brand-subtle: var(--primary-100); --ds-color-icon-brand-strong: var(--primary-700); --ds-color-icon-link: var(--interactive-600); --ds-color-icon-focus: var(--interactive-500); --ds-color-icon-white: var(--shade-white); --ds-color-icon-on-brand: var(--primary-on-fill, var(--shade-white)); --ds-color-icon-on-neutral-solid: var(--shade-white); --ds-color-icon-info: var(--interactive-600); --ds-color-icon-info-subtle: var(--interactive-100); --ds-color-icon-info-strong: var(--interactive-800); --ds-color-icon-success: var(--success-700); --ds-color-icon-success-subtle: var(--success-100); --ds-color-icon-success-strong: var(--success-800); --ds-color-icon-warning: var(--warning-700); --ds-color-icon-warning-subtle: var(--warning-100); --ds-color-icon-warning-strong: var(--warning-800); --ds-color-icon-error: var(--error-500); --ds-color-icon-error-subtle: var(--error-100); --ds-color-icon-error-strong: var(--error-700); --ds-color-decoration-brand-1: var(--primary-50); --ds-color-decoration-brand-2: var(--primary-100); --ds-color-decoration-brand-3: var(--primary-300); --ds-color-decoration-brand-4: var(--primary-500); --ds-color-decoration-brand-5: var(--primary-700); --ds-color-decoration-trophy-gold: var(--trophy-gold); --ds-color-decoration-trophy-silver: var(--trophy-silver); --ds-color-decoration-trophy-bronze: var(--trophy-bronze); --ds-shadow-none: none; --ds-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --ds-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --ds-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --ds-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --ds-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --ds-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --ds-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); --ds-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--ds-color-border-focus) 35%, transparent); --ds-shadow-focus-error: 0 0 0 3px color-mix(in srgb, var(--ds-color-border-error) 35%, transparent); } [data-theme="dark"] { --ds-color-bg-primary: var(--dark-500); --ds-color-bg-secondary: var(--dark-300); --ds-color-bg-tertiary: var(--dark-200); --ds-color-bg-darkest: var(--dark-800); --ds-color-bg-white: var(--shade-white); --ds-color-bg-inverse: var(--neutral-900); --ds-color-bg-app-background: var(--dark-900); --ds-color-bg-overlay-backdrop: linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%); --ds-color-bg-hover: var(--dark-400); --ds-color-bg-surface-raised: var(--dark-300); --ds-color-bg-action: var(--primary-fill, var(--primary-600)); --ds-color-bg-action-hover: var(--primary-fill-hover, color-mix(in srgb, var(--ds-color-bg-action) 88%, var(--shade-black))); --ds-color-bg-action-active: var(--primary-fill-active, color-mix(in srgb, var(--ds-color-bg-action) 76%, var(--shade-black))); --ds-color-bg-action-subtle: var(--primary-800); --ds-color-bg-danger: var(--error-600); --ds-color-bg-danger-hover: var(--error-700); --ds-color-bg-danger-active: var(--error-800); --ds-color-bg-neutral-solid: var(--shade-white); --ds-color-bg-neutral-solid-hover: var(--neutral-200); --ds-color-bg-brand: var(--primary-fill, var(--primary-600)); --ds-color-bg-brand-subtle: var(--primary-800); --ds-color-bg-brand-muted: var(--primary-700); --ds-color-bg-brand-strong: var(--primary-700); --ds-color-bg-info: var(--interactive-600); --ds-color-bg-info-subtle: var(--interactive-900); --ds-color-bg-info-strong: var(--interactive-700); --ds-color-bg-warning: var(--warning-700); --ds-color-bg-warning-subtle: var(--warning-900); --ds-color-bg-warning-strong: var(--warning-800); --ds-color-bg-success: var(--success-700); --ds-color-bg-success-subtle: var(--success-900); --ds-color-bg-success-strong: var(--success-800); --ds-color-bg-error: var(--error-600); --ds-color-bg-error-subtle: var(--error-900); --ds-color-bg-error-strong: var(--error-700); --ds-color-text-primary: var(--shade-white); --ds-color-text-secondary: var(--typography-100); --ds-color-text-tertiary: var(--typography-200); --ds-color-text-quaternary: var(--typography-300); --ds-color-text-link: var(--interactive-300); --ds-color-text-brand: var(--primary-text-dark, var(--primary-300)); --ds-color-text-brand-subtle: var(--primary-700); --ds-color-text-brand-strong: var(--primary-100); --ds-color-text-white: var(--shade-white); --ds-color-text-on-brand: var(--primary-on-fill, var(--shade-white)); --ds-color-text-on-neutral-solid: var(--neutral-900); --ds-color-text-info: var(--interactive-300); --ds-color-text-info-subtle: var(--interactive-200); --ds-color-text-info-strong: var(--interactive-100); --ds-color-text-success: var(--success-300); --ds-color-text-success-subtle: var(--success-200); --ds-color-text-success-strong: var(--success-100); --ds-color-text-warning: var(--warning-300); --ds-color-text-warning-subtle: var(--warning-200); --ds-color-text-warning-strong: var(--warning-100); --ds-color-text-error: var(--error-300); --ds-color-text-error-subtle: var(--error-200); --ds-color-text-error-strong: var(--error-100); --ds-color-border-primary: var(--neutral-700); --ds-color-border-secondary: var(--dark-50); --ds-color-border-subtle: var(--dark-100); --ds-color-border-darkest: var(--neutral-50); --ds-color-border-white: var(--shade-white); --ds-color-border-control: var(--neutral-400); --ds-color-border-active: var(--primary-text-dark, var(--primary-300)); --ds-color-border-active-subtle: var(--primary-700); --ds-color-border-focus: var(--interactive-400); --ds-color-border-info: var(--interactive-400); --ds-color-border-info-subtle: var(--interactive-800); --ds-color-border-info-strong: var(--interactive-300); --ds-color-border-success: var(--success-400); --ds-color-border-success-subtle: var(--success-800); --ds-color-border-success-strong: var(--success-300); --ds-color-border-warning: var(--warning-400); --ds-color-border-warning-subtle: var(--warning-800); --ds-color-border-warning-strong: var(--warning-300); --ds-color-border-error: var(--error-400); --ds-color-border-error-subtle: var(--error-800); --ds-color-border-error-strong: var(--error-300); --ds-color-icon-primary: var(--neutral-100); --ds-color-icon-secondary: var(--neutral-300); --ds-color-icon-tertiary: var(--neutral-500); --ds-color-icon-brand: var(--primary-text-dark, var(--primary-300)); --ds-color-icon-brand-subtle: var(--primary-700); --ds-color-icon-brand-strong: var(--primary-100); --ds-color-icon-link: var(--interactive-300); --ds-color-icon-focus: var(--interactive-300); --ds-color-icon-white: var(--shade-white); --ds-color-icon-on-brand: var(--primary-on-fill, var(--shade-white)); --ds-color-icon-on-neutral-solid: var(--neutral-900); --ds-color-icon-info: var(--interactive-300); --ds-color-icon-info-subtle: var(--interactive-700); --ds-color-icon-info-strong: var(--interactive-100); --ds-color-icon-success: var(--success-300); --ds-color-icon-success-subtle: var(--success-700); --ds-color-icon-success-strong: var(--success-100); --ds-color-icon-warning: var(--warning-300); --ds-color-icon-warning-subtle: var(--warning-700); --ds-color-icon-warning-strong: var(--warning-100); --ds-color-icon-error: var(--error-300); --ds-color-icon-error-subtle: var(--error-700); --ds-color-icon-error-strong: var(--error-100); --ds-color-decoration-brand-1: var(--primary-900); --ds-color-decoration-brand-2: var(--primary-800); --ds-color-decoration-brand-3: var(--primary-600); --ds-color-decoration-brand-4: var(--primary-400); --ds-color-decoration-brand-5: var(--primary-200); --ds-color-decoration-trophy-gold: var(--trophy-gold); --ds-color-decoration-trophy-silver: var(--trophy-silver); --ds-color-decoration-trophy-bronze: var(--trophy-bronze); --ds-shadow-none: none; --ds-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3); --ds-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4); --ds-shadow-md: 0 0 0 1px rgb(255 255 255 / 0.08), 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5); --ds-shadow-lg: 0 0 0 1px rgb(255 255 255 / 0.08), 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5); --ds-shadow-xl: 0 0 0 1px rgb(255 255 255 / 0.08), 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5); --ds-shadow-2xl: 0 0 0 1px rgb(255 255 255 / 0.08), 0 25px 50px -12px rgb(0 0 0 / 0.6); --ds-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.3); --ds-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--ds-color-border-focus) 35%, transparent); --ds-shadow-focus-error: 0 0 0 3px color-mix(in srgb, var(--ds-color-border-error) 35%, transparent); } :root, [data-theme] { --ds-comp-input-bg-default: var(--ds-color-bg-primary); --ds-comp-input-bg-disabled: var(--ds-color-bg-secondary); --ds-comp-input-bg-addon: var(--ds-color-bg-secondary); --ds-comp-input-border-default: var(--ds-color-border-control); --ds-comp-input-border-hover: var(--ds-color-border-control); --ds-comp-input-border-focus: var(--ds-color-border-focus); --ds-comp-input-border-error: var(--ds-color-border-error); --ds-comp-input-border-addon: var(--ds-color-border-primary); --ds-comp-input-text-label: var(--ds-color-text-secondary); --ds-comp-input-text-required: var(--ds-color-text-error); --ds-comp-input-text-value: var(--ds-color-text-primary); --ds-comp-input-text-placeholder: var(--ds-color-text-tertiary); --ds-comp-input-text-disabled: var(--ds-color-text-quaternary); --ds-comp-input-text-addon: var(--ds-color-text-secondary); --ds-comp-input-text-description: var(--ds-color-text-tertiary); --ds-comp-input-text-error: var(--ds-color-text-error); --ds-comp-input-icon-affix: var(--ds-color-text-secondary); --ds-comp-checkbox-bg-default: var(--ds-color-bg-primary); --ds-comp-checkbox-bg-checked: var(--ds-color-bg-action); --ds-comp-checkbox-border-default: var(--ds-color-border-control); --ds-comp-checkbox-border-hover: var(--ds-color-border-control); --ds-comp-checkbox-border-focus: var(--ds-color-border-focus); --ds-comp-checkbox-border-checked: var(--ds-color-bg-action); --ds-comp-checkbox-border-error: var(--ds-color-border-error); --ds-comp-checkbox-icon-check: var(--ds-color-text-on-brand); --ds-comp-checkbox-text-label: var(--ds-color-text-primary); --ds-comp-checkbox-text-disabled: var(--ds-color-text-quaternary); --ds-comp-checkbox-text-description: var(--ds-color-text-secondary); --ds-comp-checkbox-text-error: var(--ds-color-text-error); --ds-comp-radio-bg-default: var(--ds-color-bg-primary); --ds-comp-radio-bg-indicator: var(--ds-color-bg-action); --ds-comp-radio-border-default: var(--ds-color-border-control); --ds-comp-radio-border-hover: var(--ds-color-border-control); --ds-comp-radio-border-focus: var(--ds-color-border-focus); --ds-comp-radio-border-checked: var(--ds-color-bg-action); --ds-comp-radio-text-group-label: var(--ds-color-text-primary); --ds-comp-radio-text-label: var(--ds-color-text-primary); --ds-comp-radio-text-disabled: var(--ds-color-text-quaternary); --ds-comp-radio-text-description: var(--ds-color-text-secondary); --ds-comp-switch-track-bg-off: var(--ds-color-border-control); --ds-comp-switch-track-bg-off-hover: var(--ds-color-border-control); --ds-comp-switch-track-bg-on: var(--ds-color-bg-action); --ds-comp-switch-track-bg-on-hover: var(--ds-color-bg-action-hover); --ds-comp-switch-thumb-bg: var(--ds-color-bg-primary); --ds-comp-switch-text-label: var(--ds-color-text-primary); --ds-comp-switch-text-disabled: var(--ds-color-text-quaternary); --ds-comp-switch-text-description: var(--ds-color-text-secondary); --ds-comp-select-bg-trigger: var(--ds-color-bg-primary); --ds-comp-select-bg-popup: var(--ds-color-bg-primary); --ds-comp-select-bg-item-highlighted: var(--ds-color-bg-hover); --ds-comp-select-border-default: var(--ds-color-border-control); --ds-comp-select-border-hover: var(--ds-color-border-control); --ds-comp-select-border-focus: var(--ds-color-border-focus); --ds-comp-select-border-error: var(--ds-color-border-error-subtle); --ds-comp-select-border-popup: var(--ds-color-border-subtle); --ds-comp-select-border-group: var(--ds-color-border-subtle); --ds-comp-select-text-label: var(--ds-color-text-primary); --ds-comp-select-text-value: var(--ds-color-text-primary); --ds-comp-select-text-placeholder: var(--ds-color-text-tertiary); --ds-comp-select-text-item: var(--ds-color-text-primary); --ds-comp-select-text-item-selected: var(--ds-color-text-brand); --ds-comp-select-text-group-label: var(--ds-color-text-secondary); --ds-comp-select-text-description: var(--ds-color-text-secondary); --ds-comp-select-text-error: var(--ds-color-text-error); --ds-comp-select-icon-chevron: var(--ds-color-text-secondary); --ds-comp-select-icon-indicator: var(--ds-color-bg-action); --ds-comp-select-icon-scroll-arrow: var(--ds-color-text-secondary); --ds-comp-tooltip-bg-default: var(--ds-color-bg-inverse); --ds-comp-tooltip-bg-inverse: var(--ds-color-bg-primary); --ds-comp-tooltip-text-default: var(--ds-color-text-white); --ds-comp-tooltip-text-inverse: var(--ds-color-text-primary); --ds-comp-tooltip-border-default: var(--ds-color-border-subtle); --ds-comp-tooltip-border-inverse: var(--ds-color-border-subtle); --ds-comp-tab-bg-list: var(--ds-color-bg-secondary); --ds-comp-tab-bg-enclosed-active: var(--ds-color-bg-primary); --ds-comp-tab-bg-pill-active: var(--ds-color-bg-action); --ds-comp-tab-bg-pill-hover: var(--ds-color-bg-hover); --ds-comp-tab-border-list: var(--ds-color-border-primary); --ds-comp-tab-border-indicator: var(--ds-color-bg-action); --ds-comp-tab-text-default: var(--ds-color-text-secondary); --ds-comp-tab-text-hover: var(--ds-color-text-primary); --ds-comp-tab-text-active: var(--ds-color-text-brand); --ds-comp-tab-text-enclosed-active: var(--ds-color-text-primary); --ds-comp-tab-text-pill-active: var(--ds-color-text-on-brand); --ds-comp-tab-text-pill-hover: var(--ds-color-text-primary); --ds-comp-tab-text-panel: var(--ds-color-text-primary); --ds-comp-toast-bg-default: var(--ds-color-bg-primary); --ds-comp-toast-bg-close-hover: var(--ds-color-bg-hover); --ds-comp-toast-border-default: var(--ds-color-border-subtle); --ds-comp-toast-icon-info: var(--ds-color-icon-info); --ds-comp-toast-icon-success: var(--ds-color-icon-success); --ds-comp-toast-icon-warning: var(--ds-color-icon-warning); --ds-comp-toast-icon-error: var(--ds-color-icon-error); --ds-comp-toast-text-title: var(--ds-color-text-primary); --ds-comp-toast-text-description: var(--ds-color-text-secondary); --ds-comp-toast-text-close: var(--ds-color-text-secondary); --ds-comp-toast-text-close-hover: var(--ds-color-text-primary); --ds-comp-separator-bg: var(--ds-color-border-subtle); --ds-comp-avatar-bg: var(--ds-color-bg-secondary); --ds-comp-avatar-text: var(--ds-color-text-secondary); --ds-comp-progress-track-bg: var(--ds-color-bg-secondary); --ds-comp-progress-indicator-bg: var(--ds-color-bg-brand); --ds-comp-progress-text-label: var(--ds-color-text-primary); --ds-comp-progress-text-value: var(--ds-color-text-secondary); --ds-comp-toggle-bg-hover: var(--ds-color-bg-secondary); --ds-comp-toggle-bg-pressed: var(--ds-color-bg-secondary); --ds-comp-toggle-bg-outline-pressed: var(--ds-color-bg-brand-subtle); --ds-comp-toggle-border-outline: var(--ds-color-border-subtle); --ds-comp-toggle-border-outline-pressed: var(--ds-color-border-active); --ds-comp-toggle-text-default: var(--ds-color-text-secondary); --ds-comp-toggle-text-hover: var(--ds-color-text-primary); --ds-comp-toggle-text-pressed: var(--ds-color-text-primary); --ds-comp-toggle-text-outline-pressed: var(--ds-color-text-brand); } [data-density="compact"] { --ds-comp-control-height-sm: 1.75rem; --ds-comp-control-height-md: 2rem; --ds-comp-control-height-lg: 2.5rem; --ds-comp-button-padding-x-sm: 0.5rem; --ds-comp-button-padding-x-md: 0.75rem; --ds-comp-button-padding-x-lg: 1rem; --ds-comp-button-icon-only-size-sm: 1.75rem; --ds-comp-button-icon-only-size-md: 2rem; --ds-comp-button-icon-only-size-lg: 2.5rem; --ds-comp-input-height-sm: 2rem; --ds-comp-input-height-md: 2.25rem; --ds-comp-input-height-lg: 2.75rem; --ds-comp-input-padding-x-sm: 0.5rem; --ds-comp-input-padding-x-md: 0.625rem; --ds-comp-input-padding-x-lg: 0.75rem; --ds-comp-menu-item-padding-x: 0.5rem; --ds-comp-menu-item-padding-y: 0.25rem; --ds-comp-context-menu-item-padding-x: 0.5rem; --ds-comp-context-menu-item-padding-y: 0.25rem; --ds-comp-accordion-padding-x: 0.75rem; --ds-comp-accordion-padding-y: 0.625rem; --ds-comp-dialog-padding: 1.125rem; --ds-comp-drawer-padding: 1.125rem; --ds-comp-alert-dialog-padding: 1.125rem; --ds-comp-toast-padding: 0.75rem; --ds-comp-tab-padding-x: 0.5rem; --ds-comp-tab-padding-y: 0.375rem; --ds-comp-toolbar-height-sm: 1.75rem; --ds-comp-toolbar-height-md: 2rem; } /* typography: laptop */ @media (max-width: 1199.98px) { :root { --ds-typography-display-large-med-font-size: 2.875rem; --ds-typography-display-large-semibold-font-size: 2.875rem; --ds-typography-display-large-bold-font-size: 2.875rem; --ds-typography-display-large-extrabold-font-size: 2.875rem; --ds-typography-h1-med-font-size: 2.375rem; --ds-typography-h1-semibold-font-size: 2.375rem; --ds-typography-h1-bold-font-size: 2.375rem; --ds-typography-h1-extrabold-font-size: 2.375rem; --ds-typography-h2-med-font-size: 2.125rem; --ds-typography-h2-semibold-font-size: 2.125rem; --ds-typography-h2-bold-font-size: 2.125rem; --ds-typography-h2-extrabold-font-size: 2.125rem; --ds-typography-h3-med-font-size: 1.875rem; --ds-typography-h3-semibold-font-size: 1.875rem; --ds-typography-h3-bold-font-size: 1.875rem; --ds-typography-h3-extrabold-font-size: 1.875rem; --ds-typography-h4-med-font-size: 1.625rem; --ds-typography-h4-semibold-font-size: 1.625rem; --ds-typography-h4-bold-font-size: 1.625rem; --ds-typography-h4-extrabold-font-size: 1.625rem; --ds-typography-h5-med-font-size: 1.375rem; --ds-typography-h5-semibold-font-size: 1.375rem; --ds-typography-h5-bold-font-size: 1.375rem; --ds-typography-h5-extrabold-font-size: 1.375rem; --ds-typography-h6-med-font-size: 1.125rem; --ds-typography-h6-semibold-font-size: 1.125rem; --ds-typography-h6-bold-font-size: 1.125rem; --ds-typography-h6-extrabold-font-size: 1.125rem; --ds-typography-para-large-regular-font-size: 1rem; --ds-typography-para-large-med-font-size: 1rem; --ds-typography-para-large-semibold-font-size: 1rem; --ds-typography-para-large-underline-font-size: 1rem; --ds-typography-para-large-strikethrough-font-size: 1rem; --ds-typography-para-large-italic-font-size: 1rem; --ds-typography-para-med-regular-font-size: 0.875rem; --ds-typography-para-med-med-font-size: 0.875rem; --ds-typography-para-med-semibold-font-size: 0.875rem; --ds-typography-para-med-underline-font-size: 0.875rem; --ds-typography-para-med-strikethrough-font-size: 0.875rem; --ds-typography-para-med-italic-font-size: 0.875rem; } } /* typography: mobile */ @media (max-width: 860px) { :root { --ds-typography-display-large-med-font-size: 2.5rem; --ds-typography-display-large-med-line-height: 3rem; --ds-typography-display-large-semibold-font-size: 2.5rem; --ds-typography-display-large-semibold-line-height: 3rem; --ds-typography-display-large-bold-font-size: 2.5rem; --ds-typography-display-large-bold-line-height: 3rem; --ds-typography-display-large-extrabold-font-size: 2.5rem; --ds-typography-display-large-extrabold-line-height: 3rem; --ds-typography-h1-med-font-size: 2rem; --ds-typography-h1-med-line-height: 2.5rem; --ds-typography-h1-semibold-font-size: 2rem; --ds-typography-h1-semibold-line-height: 2.5rem; --ds-typography-h1-bold-font-size: 2rem; --ds-typography-h1-bold-line-height: 2.5rem; --ds-typography-h1-extrabold-font-size: 2rem; --ds-typography-h1-extrabold-line-height: 2.5rem; --ds-typography-h2-med-font-size: 1.75rem; --ds-typography-h2-med-line-height: 2.25rem; --ds-typography-h2-semibold-font-size: 1.75rem; --ds-typography-h2-semibold-line-height: 2.25rem; --ds-typography-h2-bold-font-size: 1.75rem; --ds-typography-h2-bold-line-height: 2.25rem; --ds-typography-h2-extrabold-font-size: 1.75rem; --ds-typography-h2-extrabold-line-height: 2.25rem; --ds-typography-h3-med-font-size: 1.5rem; --ds-typography-h3-med-line-height: 2rem; --ds-typography-h3-semibold-font-size: 1.5rem; --ds-typography-h3-semibold-line-height: 2rem; --ds-typography-h3-bold-font-size: 1.5rem; --ds-typography-h3-bold-line-height: 2rem; --ds-typography-h3-extrabold-font-size: 1.5rem; --ds-typography-h3-extrabold-line-height: 2rem; --ds-typography-h4-med-font-size: 1.25rem; --ds-typography-h4-med-line-height: 1.75rem; --ds-typography-h4-semibold-font-size: 1.25rem; --ds-typography-h4-semibold-line-height: 1.75rem; --ds-typography-h4-bold-font-size: 1.25rem; --ds-typography-h4-bold-line-height: 1.75rem; --ds-typography-h4-extrabold-font-size: 1.25rem; --ds-typography-h4-extrabold-line-height: 1.75rem; --ds-typography-h5-med-font-size: 1.125rem; --ds-typography-h5-med-line-height: 1.5rem; --ds-typography-h5-semibold-font-size: 1.125rem; --ds-typography-h5-semibold-line-height: 1.5rem; --ds-typography-h5-bold-font-size: 1.125rem; --ds-typography-h5-bold-line-height: 1.5rem; --ds-typography-h5-extrabold-font-size: 1.125rem; --ds-typography-h5-extrabold-line-height: 1.5rem; --ds-typography-h6-med-font-size: 1rem; --ds-typography-h6-med-line-height: 1.5rem; --ds-typography-h6-semibold-font-size: 1rem; --ds-typography-h6-semibold-line-height: 1.5rem; --ds-typography-h6-bold-font-size: 1rem; --ds-typography-h6-bold-line-height: 1.5rem; --ds-typography-h6-extrabold-font-size: 1rem; --ds-typography-h6-extrabold-line-height: 1.5rem; --ds-typography-para-large-regular-font-size: 1rem; --ds-typography-para-large-regular-line-height: 1.5rem; --ds-typography-para-large-med-font-size: 1rem; --ds-typography-para-large-med-line-height: 1.5rem; --ds-typography-para-large-semibold-font-size: 1rem; --ds-typography-para-large-semibold-line-height: 1.5rem; --ds-typography-para-large-underline-font-size: 1rem; --ds-typography-para-large-underline-line-height: 1.5rem; --ds-typography-para-large-strikethrough-font-size: 1rem; --ds-typography-para-large-strikethrough-line-height: 1.5rem; --ds-typography-para-large-italic-font-size: 1rem; --ds-typography-para-large-italic-line-height: 1.5rem; --ds-typography-para-med-regular-font-size: 1rem; --ds-typography-para-med-med-font-size: 1rem; --ds-typography-para-med-semibold-font-size: 1rem; --ds-typography-para-med-underline-font-size: 1rem; --ds-typography-para-med-strikethrough-font-size: 1rem; --ds-typography-para-med-italic-font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── wylo-web bridge ─────────────────────────────────────────────────────── */ /* wylo-web bridge aliases behind theme.app.neutral / theme.app.typography (src/config/themeBridge.js). * * Appended to public/tokens.css by scripts/sync-ds-tokens.mjs, after the Wylo DS tokens. * Edit this file, not public/tokens.css. Scaffolding: delete once no file reads * theme.app.neutral / theme.app.typography. */ :root, [data-theme='light'] { --bridge-neutral-50: var(--neutral-50); --bridge-typography-50: var(--typography-50); --bridge-neutral-100: var(--neutral-100); --bridge-typography-100: var(--typography-100); --bridge-neutral-200: var(--neutral-200); --bridge-typography-200: var(--typography-200); --bridge-neutral-300: var(--neutral-300); --bridge-typography-300: var(--typography-300); --bridge-neutral-400: var(--neutral-400); --bridge-typography-400: var(--typography-400); --bridge-neutral-500: var(--neutral-500); /* 600, not 500: typography-500 is 4.3:1 on grey surfaces (matches --ds-color-text-tertiary). */ --bridge-typography-500: var(--typography-600); --bridge-neutral-600: var(--neutral-600); --bridge-typography-600: var(--typography-600); --bridge-neutral-700: var(--neutral-700); --bridge-typography-700: var(--typography-700); --bridge-neutral-800: var(--neutral-800); --bridge-typography-800: var(--typography-800); --bridge-neutral-900: var(--neutral-900); --bridge-typography-900: var(--typography-900); } [data-theme='dark'] { --bridge-neutral-50: var(--dark-500); --bridge-typography-50: var(--dark-500); --bridge-neutral-100: var(--dark-400); --bridge-typography-100: var(--dark-300); --bridge-neutral-200: var(--dark-300); --bridge-typography-200: var(--dark-100); --bridge-neutral-300: var(--dark-200); --bridge-typography-300: var(--neutral-600); --bridge-neutral-400: var(--dark-100); --bridge-typography-400: var(--neutral-500); --bridge-neutral-500: var(--neutral-500); --bridge-typography-500: var(--neutral-400); --bridge-neutral-600: var(--neutral-400); --bridge-typography-600: var(--neutral-300); --bridge-neutral-700: var(--neutral-300); --bridge-typography-700: var(--typography-200); --bridge-neutral-800: var(--neutral-200); --bridge-typography-800: var(--typography-100); --bridge-neutral-900: var(--neutral-100); --bridge-typography-900: var(--typography-50); }