/** * Designbase Korea Design Tokens * Generated: 2026-06-03T13:19:41.069Z * Version: 0.2.5 * * Structure: * - Foundation: Raw scales (global) * - Aliases: Human-friendly labels (global) * - Semantic: Product meaning (light theme = :root) * - Dark: Overrides only (dark theme = [data-theme="dark"]) */ :root { --z-index-foundation-toast: 1030; --z-index-foundation-tooltip: 1020; --z-index-foundation-popover: 1010; --z-index-foundation-modal: 1000; --z-index-foundation-auto: auto; --z-index-foundation-50: 50; --z-index-foundation-40: 40; --z-index-foundation-30: 30; --z-index-foundation-20: 20; --z-index-foundation-10: 10; --z-index-foundation-0: 0; --typography-foundation-line-height-loose: 2; --typography-foundation-line-height-relaxed: 1.625; --typography-foundation-line-height-normal: 1.5; --typography-foundation-line-height-snug: 1.375; --typography-foundation-line-height-tight: 1.25; --typography-foundation-line-height-none: 1; --typography-foundation-font-weight-extrabold: 800; --typography-foundation-font-weight-bold: 700; --typography-foundation-font-weight-semibold: 600; --typography-foundation-font-weight-medium: 500; --typography-foundation-font-weight-normal: 400; --typography-foundation-font-weight-light: 300; --typography-foundation-font-size-6xl: 3.75rem; --typography-foundation-font-size-5xl: 3rem; --typography-foundation-font-size-4xl: 2.25rem; --typography-foundation-font-size-3xl: 1.875rem; --typography-foundation-font-size-2xl: 1.5rem; --typography-foundation-font-size-xl: 1.25rem; --typography-foundation-font-size-l: 1.125rem; --typography-foundation-font-size-base: 1rem; --typography-foundation-font-size-s: 0.875rem; --typography-foundation-font-size-xs: 0.75rem; --typography-foundation-font-family-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace; --typography-foundation-font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --spacing-foundation-05: 0.125rem; --spacing-foundation-96: 24rem; --spacing-foundation-80: 20rem; --spacing-foundation-72: 18rem; --spacing-foundation-64: 16rem; --spacing-foundation-60: 15rem; --spacing-foundation-56: 14rem; --spacing-foundation-52: 13rem; --spacing-foundation-48: 12rem; --spacing-foundation-44: 11rem; --spacing-foundation-40: 10rem; --spacing-foundation-36: 9rem; --spacing-foundation-32: 8rem; --spacing-foundation-28: 7rem; --spacing-foundation-24: 6rem; --spacing-foundation-20: 5rem; --spacing-foundation-16: 4rem; --spacing-foundation-14: 3.5rem; --spacing-foundation-12: 3rem; --spacing-foundation-11: 2.75rem; --spacing-foundation-10: 2.5rem; --spacing-foundation-9: 2.25rem; --spacing-foundation-8: 2rem; --spacing-foundation-7: 1.75rem; --spacing-foundation-6: 1.5rem; --spacing-foundation-5: 1.25rem; --spacing-foundation-4: 1rem; --spacing-foundation-3: 0.75rem; --spacing-foundation-2: 0.5rem; --spacing-foundation-1: 0.25rem; --spacing-foundation-0: 0rem; --size-semantic-modal-xl: 62.5rem; --size-semantic-modal-l: 50rem; --size-semantic-modal-m: 37.5rem; --size-semantic-modal-s: 25rem; --size-semantic-card-l: 25rem; --size-semantic-card-m: 18.75rem; --size-semantic-card-s: 12.5rem; --size-foundation-5xl: 6rem; --size-foundation-4xl: 5rem; --size-foundation-3xl: 4rem; --size-foundation-xxl: 3rem; --size-foundation-xl: 2.5rem; --size-foundation-l: 2rem; --size-foundation-m: 1.5rem; --size-foundation-s: 1.25rem; --size-foundation-xs: 1rem; --size-foundation-xxs: 0.75rem; --motion-foundation-easing-ease-in-out: ease-in-out; --motion-foundation-easing-ease-out: ease-out; --motion-foundation-easing-ease-in: ease-in; --motion-foundation-easing-ease: ease; --motion-foundation-duration-slow: 500ms; --motion-foundation-duration-base: 300ms; --motion-foundation-duration-fast: 150ms; --layout-foundation-breakpoint-3xl: 120rem; --layout-foundation-breakpoint-xxl: 90rem; --layout-foundation-breakpoint-xl: 80rem; --layout-foundation-breakpoint-l: 64rem; --layout-foundation-breakpoint-m: 48rem; --layout-foundation-breakpoint-s: 30rem; --layout-foundation-breakpoint-xs: 0rem; --layout-foundation-grid-gutter-xxl: 3rem; --layout-foundation-grid-gutter-xl: 2.5rem; --layout-foundation-grid-gutter-l: 2rem; --layout-foundation-grid-gutter-m: 1.5rem; --layout-foundation-grid-gutter-s: 1rem; --layout-foundation-grid-gutter-xs: 0.5rem; --layout-foundation-grid-gutter-none: 0rem; --layout-foundation-grid-columns-24: 24; --layout-foundation-grid-columns-16: 16; --layout-foundation-grid-columns-12: 12; --layout-foundation-grid-columns-6: 6; --layout-foundation-container-padding-xxl: 4rem; --layout-foundation-container-padding-xl: 3rem; --layout-foundation-container-padding-l: 2rem; --layout-foundation-container-padding-m: 1.5rem; --layout-foundation-container-padding-s: 1rem; --layout-foundation-container-padding-xs: 0.5rem; --layout-foundation-container-padding-none: 0rem; --layout-foundation-container-max-width-4xl: 120rem; --layout-foundation-container-max-width-3xl: 100rem; --layout-foundation-container-max-width-xxl: 90rem; --layout-foundation-container-max-width-xl: 80rem; --layout-foundation-container-max-width-l: 64rem; --layout-foundation-container-max-width-m: 48rem; --layout-foundation-container-max-width-s: 40rem; --layout-foundation-container-max-width-xs: 30rem; --layout-foundation-container-max-width-fluid: 100%; --blur-foundation-l: 2rem; --blur-foundation-m: 1rem; --blur-foundation-s: 0.5rem; --blur-foundation-none: 0rem; --opacity-foundation-100: 1; --opacity-foundation-95: 0.95; --opacity-foundation-90: 0.9; --opacity-foundation-80: 0.8; --opacity-foundation-75: 0.75; --opacity-foundation-70: 0.7; --opacity-foundation-60: 0.6; --opacity-foundation-50: 0.5; --opacity-foundation-40: 0.4; --opacity-foundation-30: 0.3; --opacity-foundation-25: 0.25; --opacity-foundation-20: 0.2; --opacity-foundation-10: 0.1; --opacity-foundation-5: 0.05; --opacity-foundation-0: 0; --shadow-foundation-inner: 0px 2px 4px 0px rgba(0, 0, 0, 0.06); --shadow-foundation-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-foundation-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1); --shadow-foundation-l: 0px 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-foundation-m: 0px 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-foundation-base: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); --shadow-foundation-s: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); --shadow-foundation-none: 0px 0px 0px 0px rgba(0,0,0,0.2); --color-aliases-overlay-inverse: rgba(255, 255, 255, 0.6); --color-aliases-overlay-soft: rgba(0, 0, 0, 0.3); --color-aliases-overlay-base: rgba(0, 0, 0, 0.6); --color-aliases-text-link-hover: rgba(0, 111, 255, 0.9); --color-aliases-surface-alpha-inverse-70: rgba(0, 0, 0, 0.7); --color-aliases-surface-alpha-inverse-50: rgba(0, 0, 0, 0.5); --color-aliases-surface-alpha-inverse-30: rgba(0, 0, 0, 0.3); --color-aliases-surface-alpha-inverse-10: rgba(0, 0, 0, 0.1); --color-aliases-surface-alpha-inverse: rgba(0, 0, 0, 0.3); --color-aliases-surface-alpha-70: rgba(255, 255, 255, 0.7); --color-aliases-surface-alpha-50: rgba(255, 255, 255, 0.5); --color-aliases-surface-alpha-30: rgba(255, 255, 255, 0.3); --color-aliases-surface-alpha-10: rgba(255, 255, 255, 0.1); --color-aliases-surface-alpha: rgba(255, 255, 255, 0.3); --color-aliases-surface-transparent: rgba(255, 255, 255, 0); --color-aliases-border-alpha-inverse-70: rgba(255, 255, 255, 0.7); --color-aliases-border-alpha-inverse-50: rgba(255, 255, 255, 0.5); --color-aliases-border-alpha-inverse-30: rgba(255, 255, 255, 0.3); --color-aliases-border-alpha-inverse-10: rgba(255, 255, 255, 0.1); --color-aliases-border-alpha-inverse: rgba(255, 255, 255, 0.1); --color-aliases-border-alpha-70: rgba(0, 0, 0, 0.7); --color-aliases-border-alpha-50: rgba(0, 0, 0, 0.5); --color-aliases-border-alpha-30: rgba(0, 0, 0, 0.3); --color-aliases-border-alpha-10: rgba(0, 0, 0, 0.1); --color-aliases-border-alpha: rgba(0, 0, 0, 0.1); --color-aliases-border-transparent: rgba(0, 0, 0, 0); --color-aliases-brand-primary-alpha-90: rgba(0, 111, 255, 0.9); --color-aliases-brand-primary-alpha-80: rgba(0, 111, 255, 0.8); --color-aliases-brand-primary-alpha-70: rgba(0, 111, 255, 0.7); --color-aliases-brand-primary-alpha-60: rgba(0, 111, 255, 0.6); --color-aliases-brand-primary-alpha-50: rgba(0, 111, 255, 0.5); --color-aliases-brand-primary-alpha-40: rgba(0, 111, 255, 0.4); --color-aliases-brand-primary-alpha-30: rgba(0, 111, 255, 0.3); --color-aliases-brand-primary-alpha-20: rgba(0, 111, 255, 0.2); --color-aliases-brand-primary-alpha-10: rgba(0, 111, 255, 0.1); --color-foundation-black: #000000; --color-foundation-white: #ffffff; --color-foundation-purple-900: #49169c; --color-foundation-purple-800: #5818bf; --color-foundation-purple-700: #6a1ee3; --color-foundation-purple-600: #7830f7; --color-foundation-purple-500: #8a58ff; --color-foundation-purple-400: #a385ff; --color-foundation-purple-300: #c2b1ff; --color-foundation-purple-200: #dbd4ff; --color-foundation-purple-100: #ece8ff; --color-foundation-purple-50: #f5f2ff; --color-foundation-teal-900: #134e48; --color-foundation-teal-800: #115e56; --color-foundation-teal-700: #0f766b; --color-foundation-teal-600: #0d9485; --color-foundation-teal-500: #14b8a6; --color-foundation-teal-400: #2dd4c2; --color-foundation-teal-300: #5eeadb; --color-foundation-teal-200: #99f6ec; --color-foundation-teal-100: #ccfbf6; --color-foundation-teal-50: #f0fdfc; --color-foundation-green-900: #14532b; --color-foundation-green-800: #166533; --color-foundation-green-700: #15803c; --color-foundation-green-600: #16a34a; --color-foundation-green-500: #22c55e; --color-foundation-green-400: #4ade80; --color-foundation-green-300: #86efad; --color-foundation-green-200: #bbf7d1; --color-foundation-green-100: #dcfce8; --color-foundation-green-50: #f0fdf5; --color-foundation-yellow-900: #74470f; --color-foundation-yellow-800: #89570a; --color-foundation-yellow-700: #a67102; --color-foundation-yellow-600: #d1b400; --color-foundation-yellow-500: #ffd600; --color-foundation-yellow-400: #ffe50d; --color-foundation-yellow-300: #fff441; --color-foundation-yellow-200: #fffd86; --color-foundation-yellow-100: #feffc1; --color-foundation-yellow-50: #ffffe7; --color-foundation-orange-900: #82270c; --color-foundation-orange-800: #82270c; --color-foundation-orange-700: #cc3802; --color-foundation-orange-600: #ff5100; --color-foundation-orange-500: #ff6b0a; --color-foundation-orange-400: #ff8c32; --color-foundation-orange-300: #ffb66d; --color-foundation-orange-200: #ffd5a5; --color-foundation-orange-100: #ffecd3; --color-foundation-orange-50: #fff7ec; --color-foundation-red-900: #7f1d1d; --color-foundation-red-800: #991b1b; --color-foundation-red-700: #b91c1c; --color-foundation-red-600: #dc2626; --color-foundation-red-500: #ef4444; --color-foundation-red-400: #f87171; --color-foundation-red-300: #fca5a5; --color-foundation-red-200: #fecaca; --color-foundation-red-100: #fee2e2; --color-foundation-red-50: #fef2f2; --color-foundation-blue-900: #0d4b9b; --color-foundation-blue-800: #0855c5; --color-foundation-blue-700: #006fff; --color-foundation-blue-600: #0683ff; --color-foundation-blue-500: #1ea2ff; --color-foundation-blue-400: #48c3ff; --color-foundation-blue-300: #83d9ff; --color-foundation-blue-200: #b5e7ff; --color-foundation-blue-100: #d6f0ff; --color-foundation-blue-50: #edf9ff; --color-foundation-neutral-white: #ffffff; --color-foundation-neutral-1100: #000000; --color-foundation-neutral-1000: #17191a; --color-foundation-neutral-900: #2f3133; --color-foundation-neutral-800: #464a4d; --color-foundation-neutral-700: #5e6366; --color-foundation-neutral-600: #757b80; --color-foundation-neutral-500: #8c9499; --color-foundation-neutral-400: #a4adb2; --color-foundation-neutral-300: #bbc5cc; --color-foundation-neutral-200: #e8eef2; --color-foundation-neutral-100: #f2f8fc; --color-foundation-neutral-50: #f8fafc; --color-foundation-neutral-0: #ffffff; --border-foundation-width-5: 0.5rem; --border-foundation-width-4: 0.25rem; --border-foundation-width-3: 0.125rem; --border-foundation-width-2: 0.0625rem; --border-foundation-width-1: 0.03125rem; --border-foundation-width-0: 0rem; --border-foundation-radius-full: 624.9375rem; --border-foundation-radius-10: 3rem; --border-foundation-radius-9: 2.5rem; --border-foundation-radius-8: 2rem; --border-foundation-radius-7: 1.5rem; --border-foundation-radius-6: 1rem; --border-foundation-radius-5: 0.75rem; --border-foundation-radius-4: 0.5rem; --border-foundation-radius-3: 0.375rem; --border-foundation-radius-2: 0.25rem; --border-foundation-radius-1: 0.125rem; --border-foundation-radius-0: 0rem; --typography-semantic-line-height-loose: var(--typography-foundation-line-height-loose); --typography-semantic-line-height-relaxed: var(--typography-foundation-line-height-relaxed); --typography-semantic-line-height-normal: var(--typography-foundation-line-height-normal); --typography-semantic-line-height-snug: var(--typography-foundation-line-height-snug); --typography-semantic-line-height-tight: var(--typography-foundation-line-height-tight); --typography-semantic-line-height-none: var(--typography-foundation-line-height-none); --typography-semantic-font-weight-extrabold: var(--typography-foundation-font-weight-extrabold); --typography-semantic-font-weight-bold: var(--typography-foundation-font-weight-bold); --typography-semantic-font-weight-semibold: var(--typography-foundation-font-weight-semibold); --typography-semantic-font-weight-medium: var(--typography-foundation-font-weight-medium); --typography-semantic-font-weight-normal: var(--typography-foundation-font-weight-normal); --typography-semantic-font-weight-light: var(--typography-foundation-font-weight-light); --typography-semantic-font-size-6xl: var(--typography-foundation-font-size-6xl); --typography-semantic-font-size-5xl: var(--typography-foundation-font-size-5xl); --typography-semantic-font-size-4xl: var(--typography-foundation-font-size-4xl); --typography-semantic-font-size-3xl: var(--typography-foundation-font-size-3xl); --typography-semantic-font-size-2xl: var(--typography-foundation-font-size-2xl); --typography-semantic-font-size-xl: var(--typography-foundation-font-size-xl); --typography-semantic-font-size-l: var(--typography-foundation-font-size-l); --typography-semantic-font-size-base: var(--typography-foundation-font-size-base); --typography-semantic-font-size-s: var(--typography-foundation-font-size-s); --typography-semantic-font-size-xs: var(--typography-foundation-font-size-xs); --typography-semantic-font-family-mono: var(--typography-foundation-font-family-mono); --typography-semantic-font-family-primary: var(--typography-foundation-font-family-primary); --spacing-aliases-scale-2xl: var(--spacing-foundation-10); --spacing-aliases-scale-xl: var(--spacing-foundation-8); --spacing-aliases-scale-l: var(--spacing-foundation-5); --spacing-aliases-scale-m: var(--spacing-foundation-3); --spacing-aliases-scale-s: var(--spacing-foundation-2); --spacing-aliases-scale-xs: var(--spacing-foundation-1); --spacing-aliases-scale-xxs: var(--spacing-foundation-05); --size-aliases-5xl: var(--size-foundation-5xl); --size-aliases-4xl: var(--size-foundation-4xl); --size-aliases-3xl: var(--size-foundation-3xl); --size-aliases-xxl: var(--size-foundation-xxl); --size-aliases-xl: var(--size-foundation-xl); --size-aliases-l: var(--size-foundation-l); --size-aliases-m: var(--size-foundation-m); --size-aliases-s: var(--size-foundation-s); --size-aliases-xs: var(--size-foundation-xs); --size-aliases-xxs: var(--size-foundation-xxs); --motion-aliases-easing-standard: var(--motion-foundation-easing-ease-out); --motion-aliases-duration-slow: var(--motion-foundation-duration-slow); --motion-aliases-duration-base: var(--motion-foundation-duration-base); --motion-aliases-duration-fast: var(--motion-foundation-duration-fast); --layout-aliases-breakpoint-3xl: var(--layout-foundation-breakpoint-3xl); --layout-aliases-breakpoint-xxl: var(--layout-foundation-breakpoint-xxl); --layout-aliases-breakpoint-xl: var(--layout-foundation-breakpoint-xl); --layout-aliases-breakpoint-l: var(--layout-foundation-breakpoint-l); --layout-aliases-breakpoint-m: var(--layout-foundation-breakpoint-m); --layout-aliases-breakpoint-s: var(--layout-foundation-breakpoint-s); --layout-aliases-breakpoint-xs: var(--layout-foundation-breakpoint-xs); --layout-aliases-grid-gutter-xxl: var(--layout-foundation-grid-gutter-xxl); --layout-aliases-grid-gutter-xl: var(--layout-foundation-grid-gutter-xl); --layout-aliases-grid-gutter-l: var(--layout-foundation-grid-gutter-l); --layout-aliases-grid-gutter-m: var(--layout-foundation-grid-gutter-m); --layout-aliases-grid-gutter-s: var(--layout-foundation-grid-gutter-s); --layout-aliases-grid-gutter-xs: var(--layout-foundation-grid-gutter-xs); --layout-aliases-grid-gutter-none: var(--layout-foundation-grid-gutter-none); --layout-aliases-grid-columns-24: var(--layout-foundation-grid-columns-24); --layout-aliases-grid-columns-16: var(--layout-foundation-grid-columns-16); --layout-aliases-grid-columns-12: var(--layout-foundation-grid-columns-12); --layout-aliases-grid-columns-6: var(--layout-foundation-grid-columns-6); --layout-aliases-container-padding-xxl: var(--layout-foundation-container-padding-xxl); --layout-aliases-container-padding-xl: var(--layout-foundation-container-padding-xl); --layout-aliases-container-padding-l: var(--layout-foundation-container-padding-l); --layout-aliases-container-padding-m: var(--layout-foundation-container-padding-m); --layout-aliases-container-padding-s: var(--layout-foundation-container-padding-s); --layout-aliases-container-padding-xs: var(--layout-foundation-container-padding-xs); --layout-aliases-container-padding-none: var(--layout-foundation-container-padding-none); --layout-aliases-container-max-width-4xl: var(--layout-foundation-container-max-width-4xl); --layout-aliases-container-max-width-3xl: var(--layout-foundation-container-max-width-3xl); --layout-aliases-container-max-width-xxl: var(--layout-foundation-container-max-width-xxl); --layout-aliases-container-max-width-xl: var(--layout-foundation-container-max-width-xl); --layout-aliases-container-max-width-l: var(--layout-foundation-container-max-width-l); --layout-aliases-container-max-width-m: var(--layout-foundation-container-max-width-m); --layout-aliases-container-max-width-s: var(--layout-foundation-container-max-width-s); --layout-aliases-container-max-width-xs: var(--layout-foundation-container-max-width-xs); --layout-aliases-container-max-width-fluid: var(--layout-foundation-container-max-width-fluid); --blur-semantic-overlay-l: var(--blur-foundation-l); --blur-semantic-overlay-m: var(--blur-foundation-m); --blur-semantic-overlay-s: var(--blur-foundation-s); --opacity-semantic-disabled: var(--opacity-foundation-50); --opacity-semantic-overlay-light: var(--opacity-foundation-25); --opacity-semantic-overlay-medium: var(--opacity-foundation-50); --opacity-semantic-overlay-dark: var(--opacity-foundation-75); --opacity-semantic-hover: var(--opacity-foundation-80); --opacity-semantic-focus: var(--opacity-foundation-90); --shadow-semantic-modal-overlay: var(--shadow-foundation-xl); --shadow-semantic-modal-content: var(--shadow-foundation-2xl); --shadow-semantic-dropdown-default: var(--shadow-foundation-m); --shadow-semantic-tooltip-default: var(--shadow-foundation-s); --shadow-aliases-button-active: var(--shadow-foundation-inner); --shadow-aliases-button-hover: var(--shadow-foundation-s); --shadow-aliases-button-default: var(--shadow-foundation-none); --shadow-aliases-card-elevated: var(--shadow-foundation-l); --shadow-aliases-card-hover: var(--shadow-foundation-m); --shadow-aliases-card-default: var(--shadow-foundation-base); --color-semantic-button-secondary-text-hover: var(--color-aliases-text-link-hover); --color-semantic-button-primary-border-active: var(--color-foundation-blue-900); --color-semantic-button-primary-border-hover: var(--color-foundation-blue-800); --color-semantic-button-primary-bg-active: var(--color-foundation-blue-900); --color-semantic-button-primary-bg-hover: var(--color-foundation-blue-800); --color-aliases-text-inverse-tertiary: var(--color-foundation-neutral-300); --color-aliases-text-inverse-secondary: var(--color-foundation-neutral-200); --color-aliases-text-inverse-primary: var(--color-foundation-neutral-white); --color-aliases-text-link: var(--color-foundation-blue-700); --color-aliases-text-disabled: var(--color-foundation-neutral-400); --color-aliases-text-tertiary: var(--color-foundation-neutral-600); --color-aliases-text-secondary: var(--color-foundation-neutral-800); --color-aliases-text-primary: var(--color-foundation-neutral-1000); --color-aliases-surface-inverse: var(--color-foundation-neutral-1000); --color-aliases-surface-muted: var(--color-foundation-neutral-200); --color-aliases-surface-layer-3: var(--color-foundation-neutral-300); --color-aliases-surface-layer-2: var(--color-foundation-neutral-200); --color-aliases-surface-layer-1: var(--color-foundation-neutral-100); --color-aliases-surface-base: var(--color-foundation-neutral-white); --color-aliases-feedback-info-bg: var(--color-foundation-blue-50); --color-aliases-feedback-info-fg: var(--color-foundation-blue-600); --color-aliases-feedback-error-bg: var(--color-foundation-red-50); --color-aliases-feedback-error-fg: var(--color-foundation-red-600); --color-aliases-feedback-warning-bg: var(--color-foundation-yellow-50); --color-aliases-feedback-warning-fg: var(--color-foundation-yellow-600); --color-aliases-feedback-success-bg: var(--color-foundation-green-50); --color-aliases-feedback-success-fg: var(--color-foundation-green-600); --color-aliases-border-inverse: var(--color-foundation-neutral-900); --color-aliases-border-muted: var(--color-foundation-neutral-100); --color-aliases-border-layer-3: var(--color-foundation-neutral-500); --color-aliases-border-layer-2: var(--color-foundation-neutral-400); --color-aliases-border-layer-1: var(--color-foundation-neutral-300); --color-aliases-border-base: var(--color-foundation-neutral-200); --color-aliases-brand-accent: var(--color-foundation-orange-600); --color-aliases-brand-tertiary: var(--color-foundation-teal-500); --color-aliases-brand-secondary: var(--color-foundation-blue-200); --color-aliases-brand-primary: var(--color-foundation-blue-700); --border-aliases-width-thicker: var(--border-foundation-width-5); --border-aliases-width-thick: var(--border-foundation-width-4); --border-aliases-width-base: var(--border-foundation-width-3); --border-aliases-width-thin: var(--border-foundation-width-2); --border-aliases-width-hairline: var(--border-foundation-width-1); --border-aliases-width-none: var(--border-foundation-width-0); --border-aliases-radius-full: var(--border-foundation-radius-full); --border-aliases-radius-3xl: var(--border-foundation-radius-10); --border-aliases-radius-2xl: var(--border-foundation-radius-8); --border-aliases-radius-xl: var(--border-foundation-radius-6); --border-aliases-radius-l: var(--border-foundation-radius-5); --border-aliases-radius-m: var(--border-foundation-radius-4); --border-aliases-radius-s: var(--border-foundation-radius-3); --border-aliases-radius-xs: var(--border-foundation-radius-2); --border-aliases-radius-none: var(--border-foundation-radius-0); --spacing-aliases-grid-gutter: var(--spacing-aliases-scale-m); --spacing-aliases-container-padding: var(--spacing-aliases-scale-m); --spacing-aliases-margin-2xl: var(--spacing-aliases-scale-2xl); --spacing-aliases-margin-xl: var(--spacing-aliases-scale-xl); --spacing-aliases-margin-l: var(--spacing-aliases-scale-l); --spacing-aliases-margin-m: var(--spacing-aliases-scale-m); --spacing-aliases-margin-s: var(--spacing-aliases-scale-s); --spacing-aliases-margin-xs: var(--spacing-aliases-scale-xs); --spacing-aliases-margin-xxs: var(--spacing-aliases-scale-xxs); --spacing-aliases-padding-2xl: var(--spacing-aliases-scale-2xl); --spacing-aliases-padding-xl: var(--spacing-aliases-scale-xl); --spacing-aliases-padding-l: var(--spacing-aliases-scale-l); --spacing-aliases-padding-m: var(--spacing-aliases-scale-m); --spacing-aliases-padding-s: var(--spacing-aliases-scale-s); --spacing-aliases-padding-xs: var(--spacing-aliases-scale-xs); --spacing-aliases-padding-xxs: var(--spacing-aliases-scale-xxs); --spacing-aliases-gap-2xl: var(--spacing-aliases-scale-2xl); --spacing-aliases-gap-xl: var(--spacing-aliases-scale-xl); --spacing-aliases-gap-l: var(--spacing-aliases-scale-l); --spacing-aliases-gap-m: var(--spacing-aliases-scale-m); --spacing-aliases-gap-s: var(--spacing-aliases-scale-s); --spacing-aliases-gap-xs: var(--spacing-aliases-scale-xs); --spacing-aliases-gap-xxs: var(--spacing-aliases-scale-xxs); --size-semantic-checkbox-l: var(--size-aliases-l); --size-semantic-checkbox-m: var(--size-aliases-m); --size-semantic-checkbox-s: var(--size-aliases-s); --size-semantic-avatar-3xl: var(--size-aliases-3xl); --size-semantic-avatar-2xl: var(--size-aliases-xxl); --size-semantic-avatar-xl: var(--size-aliases-xl); --size-semantic-avatar-l: var(--size-aliases-l); --size-semantic-avatar-m: var(--size-aliases-m); --size-semantic-avatar-s: var(--size-aliases-s); --size-semantic-avatar-xs: var(--size-aliases-xs); --size-semantic-icon-xl: var(--size-aliases-l); --size-semantic-icon-l: var(--size-aliases-m); --size-semantic-icon-m: var(--size-aliases-s); --size-semantic-icon-s: var(--size-aliases-xs); --size-semantic-icon-xs: var(--size-aliases-xxs); --size-semantic-control-l: var(--size-aliases-xl); --size-semantic-control-m: var(--size-aliases-l); --size-semantic-control-s: var(--size-aliases-m); --size-semantic-2xl: var(--size-aliases-xxl); --size-semantic-xl: var(--size-aliases-xl); --size-semantic-l: var(--size-aliases-l); --size-semantic-m: var(--size-aliases-m); --size-semantic-s: var(--size-aliases-s); --size-semantic-xs: var(--size-aliases-xs); --size-semantic-xxs: var(--size-aliases-xxs); --motion-semantic-animation-ease: var(--motion-aliases-easing-standard); --motion-semantic-animation-speed: var(--motion-aliases-duration-base); --layout-semantic-breakpoint-xxl: var(--layout-aliases-breakpoint-xxl); --layout-semantic-breakpoint-xl: var(--layout-aliases-breakpoint-xl); --layout-semantic-breakpoint-l: var(--layout-aliases-breakpoint-l); --layout-semantic-breakpoint-m: var(--layout-aliases-breakpoint-m); --layout-semantic-breakpoint-s: var(--layout-aliases-breakpoint-s); --layout-semantic-breakpoint-xs: var(--layout-aliases-breakpoint-xs); --layout-semantic-grid-gutter-xl: var(--layout-aliases-grid-gutter-xl); --layout-semantic-grid-gutter-l: var(--layout-aliases-grid-gutter-l); --layout-semantic-grid-gutter-m: var(--layout-aliases-grid-gutter-m); --layout-semantic-grid-gutter-s: var(--layout-aliases-grid-gutter-s); --layout-semantic-grid-columns-24: var(--layout-aliases-grid-columns-24); --layout-semantic-grid-columns-12: var(--layout-aliases-grid-columns-12); --layout-semantic-container-padding-l: var(--layout-aliases-container-padding-l); --layout-semantic-container-padding-m: var(--layout-aliases-container-padding-m); --layout-semantic-container-padding-s: var(--layout-aliases-container-padding-s); --layout-semantic-container-padding-none: var(--layout-aliases-container-padding-none); --layout-semantic-container-max-width-xxl: var(--layout-aliases-container-max-width-xxl); --layout-semantic-container-max-width-xl: var(--layout-aliases-container-max-width-xl); --layout-semantic-container-max-width-l: var(--layout-aliases-container-max-width-l); --layout-semantic-container-max-width-m: var(--layout-aliases-container-max-width-m); --layout-semantic-container-max-width-s: var(--layout-aliases-container-max-width-s); --layout-semantic-container-max-width-fluid: var(--layout-aliases-container-max-width-fluid); --shadow-semantic-button-active: var(--shadow-aliases-button-active); --shadow-semantic-button-hover: var(--shadow-aliases-button-hover); --shadow-semantic-button-default: var(--shadow-aliases-button-default); --shadow-semantic-card-elevated: var(--shadow-aliases-card-elevated); --shadow-semantic-card-hover: var(--shadow-aliases-card-hover); --shadow-semantic-card-default: var(--shadow-aliases-card-default); --color-semantic-interactive-bg-info: var(--color-aliases-feedback-info-bg); --color-semantic-interactive-bg-error: var(--color-aliases-feedback-error-bg); --color-semantic-interactive-bg-warning: var(--color-aliases-feedback-warning-bg); --color-semantic-interactive-bg-success: var(--color-aliases-feedback-success-bg); --color-semantic-interactive-bg-muted: var(--color-aliases-surface-muted); --color-semantic-interactive-bg-hover: var(--color-aliases-surface-layer-1); --color-semantic-interactive-bg-default: var(--color-aliases-surface-base); --color-semantic-interactive-border-info: var(--color-aliases-feedback-info-fg); --color-semantic-interactive-border-error: var(--color-aliases-feedback-error-fg); --color-semantic-interactive-border-warning: var(--color-aliases-feedback-warning-fg); --color-semantic-interactive-border-success: var(--color-aliases-feedback-success-fg); --color-semantic-interactive-border-muted: var(--color-aliases-border-muted); --color-semantic-interactive-border-hover: var(--color-aliases-border-layer-1); --color-semantic-interactive-border-default: var(--color-aliases-border-base); --color-semantic-interactive-text-primary: var(--color-aliases-text-link); --color-semantic-interactive-text-inverse: var(--color-aliases-text-inverse-primary); --color-semantic-interactive-text-disabled: var(--color-aliases-text-disabled); --color-semantic-interactive-text-mute: var(--color-aliases-text-tertiary); --color-semantic-interactive-text-hover: var(--color-aliases-text-secondary); --color-semantic-interactive-text-default: var(--color-aliases-text-primary); --color-semantic-field-input-placeholder: var(--color-aliases-text-tertiary); --color-semantic-field-input-text-disabled: var(--color-aliases-text-disabled); --color-semantic-field-input-text-default: var(--color-aliases-text-primary); --color-semantic-field-input-border-error: var(--color-aliases-feedback-error-fg); --color-semantic-field-input-border-focus: var(--color-aliases-brand-primary); --color-semantic-field-input-border-hover: var(--color-aliases-border-layer-1); --color-semantic-field-input-border-default: var(--color-aliases-border-base); --color-semantic-field-input-bg-hover: var(--color-aliases-surface-layer-1); --color-semantic-field-input-bg-disabled: var(--color-aliases-surface-muted); --color-semantic-field-input-bg-default: var(--color-aliases-surface-base); --color-semantic-button-disabled-text-disabled: var(--color-aliases-text-disabled); --color-semantic-button-disabled-bg-disabled: var(--color-aliases-surface-muted); --color-semantic-button-tertiary-border-hover: var(--color-aliases-border-layer-1); --color-semantic-button-tertiary-border-default: var(--color-aliases-border-base); --color-semantic-button-tertiary-text-disabled: var(--color-aliases-text-disabled); --color-semantic-button-tertiary-text-hover: var(--color-aliases-text-secondary); --color-semantic-button-tertiary-text-default: var(--color-aliases-text-primary); --color-semantic-button-tertiary-bg-disabled: var(--color-aliases-surface-muted); --color-semantic-button-tertiary-bg-active: var(--color-aliases-surface-layer-2); --color-semantic-button-tertiary-bg-hover: var(--color-aliases-surface-layer-1); --color-semantic-button-tertiary-bg-default: var(--color-aliases-surface-base); --color-semantic-button-secondary-border-hover: var(--color-aliases-border-layer-1); --color-semantic-button-secondary-border-default: var(--color-aliases-border-base); --color-semantic-button-secondary-text-disabled: var(--color-aliases-text-disabled); --color-semantic-button-secondary-text-default: var(--color-aliases-text-link); --color-semantic-button-secondary-bg-disabled: var(--color-aliases-surface-muted); --color-semantic-button-secondary-bg-active: var(--color-aliases-surface-layer-3); --color-semantic-button-secondary-bg-hover: var(--color-aliases-surface-layer-2); --color-semantic-button-secondary-bg-default: var(--color-aliases-surface-layer-1); --color-semantic-button-primary-border-default: var(--color-aliases-brand-primary); --color-semantic-button-primary-text-disabled: var(--color-aliases-text-disabled); --color-semantic-button-primary-text-default: var(--color-aliases-text-inverse-primary); --color-semantic-button-primary-bg-disabled: var(--color-aliases-surface-muted); --color-semantic-button-primary-bg-default: var(--color-aliases-brand-primary); --color-semantic-icon-inverse-hover: var(--color-aliases-text-inverse-secondary); --color-semantic-icon-inverse: var(--color-aliases-text-inverse-primary); --color-semantic-icon-info: var(--color-aliases-feedback-info-fg); --color-semantic-icon-error: var(--color-aliases-feedback-error-fg); --color-semantic-icon-warning: var(--color-aliases-feedback-warning-fg); --color-semantic-icon-success: var(--color-aliases-feedback-success-fg); --color-semantic-icon-color: var(--color-aliases-brand-primary); --color-semantic-icon-disabled: var(--color-aliases-text-disabled); --color-semantic-icon-muted: var(--color-aliases-text-tertiary); --color-semantic-icon-hover: var(--color-aliases-text-secondary); --color-semantic-icon-default: var(--color-aliases-text-primary); --border-semantic-radius-action-pill: var(--border-aliases-radius-full); --border-semantic-radius-action-l: var(--border-aliases-radius-l); --border-semantic-radius-action-m: var(--border-aliases-radius-m); --border-semantic-radius-action-s: var(--border-aliases-radius-s); --border-semantic-radius-checkbox-l: var(--border-aliases-radius-l); --border-semantic-radius-checkbox-m: var(--border-aliases-radius-m); --border-semantic-radius-checkbox-s: var(--border-aliases-radius-s); --border-semantic-radius-modal-l: var(--border-aliases-radius-xl); --border-semantic-radius-modal-m: var(--border-aliases-radius-l); --border-semantic-radius-modal-s: var(--border-aliases-radius-m); --border-semantic-radius-card-l: var(--border-aliases-radius-l); --border-semantic-radius-card-m: var(--border-aliases-radius-m); --border-semantic-radius-card-s: var(--border-aliases-radius-s); --border-semantic-radius-input-l: var(--border-aliases-radius-l); --border-semantic-radius-input-m: var(--border-aliases-radius-m); --border-semantic-radius-input-s: var(--border-aliases-radius-s); --border-semantic-radius-button-pill: var(--border-aliases-radius-full); --border-semantic-radius-button-l: var(--border-aliases-radius-l); --border-semantic-radius-button-m: var(--border-aliases-radius-m); --border-semantic-radius-button-s: var(--border-aliases-radius-s); --border-semantic-radius-full: var(--border-aliases-radius-full); --border-semantic-radius-3xl: var(--border-aliases-radius-3xl); --border-semantic-radius-2xl: var(--border-aliases-radius-2xl); --border-semantic-radius-xl: var(--border-aliases-radius-xl); --border-semantic-radius-l: var(--border-aliases-radius-l); --border-semantic-radius-m: var(--border-aliases-radius-m); --border-semantic-radius-s: var(--border-aliases-radius-s); --spacing-semantic-grid-gutter: var(--spacing-aliases-grid-gutter); --spacing-semantic-container-padding: var(--spacing-aliases-container-padding); --spacing-semantic-margin-xxs: var(--spacing-aliases-margin-xxs); --spacing-semantic-margin-xs: var(--spacing-aliases-margin-xs); --spacing-semantic-margin-s: var(--spacing-aliases-margin-s); --spacing-semantic-margin-m: var(--spacing-aliases-margin-m); --spacing-semantic-margin-l: var(--spacing-aliases-margin-l); --spacing-semantic-margin-xl: var(--spacing-aliases-margin-xl); --spacing-semantic-margin-2xl: var(--spacing-aliases-margin-2xl); --spacing-semantic-padding-xxs: var(--spacing-aliases-padding-xxs); --spacing-semantic-padding-xs: var(--spacing-aliases-padding-xs); --spacing-semantic-padding-s: var(--spacing-aliases-padding-s); --spacing-semantic-padding-m: var(--spacing-aliases-padding-m); --spacing-semantic-padding-l: var(--spacing-aliases-padding-l); --spacing-semantic-padding-xl: var(--spacing-aliases-padding-xl); --spacing-semantic-padding-2xl: var(--spacing-aliases-padding-2xl); --spacing-semantic-gap-xxs: var(--spacing-aliases-gap-xxs); --spacing-semantic-gap-xs: var(--spacing-aliases-gap-xs); --spacing-semantic-gap-s: var(--spacing-aliases-gap-s); --spacing-semantic-gap-m: var(--spacing-aliases-gap-m); --spacing-semantic-gap-l: var(--spacing-aliases-gap-l); --spacing-semantic-gap-xl: var(--spacing-aliases-gap-xl); --spacing-semantic-gap-2xl: var(--spacing-aliases-gap-2xl); --size-semantic-search-l: var(--size-semantic-control-l); --size-semantic-search-m: var(--size-semantic-control-m); --size-semantic-search-s: var(--size-semantic-control-s); --size-semantic-dropdown-l: var(--size-semantic-control-l); --size-semantic-dropdown-m: var(--size-semantic-control-m); --size-semantic-dropdown-s: var(--size-semantic-control-s); --size-semantic-select-l: var(--size-semantic-control-l); --size-semantic-select-m: var(--size-semantic-control-m); --size-semantic-select-s: var(--size-semantic-control-s); --size-semantic-input-l: var(--size-semantic-control-l); --size-semantic-input-m: var(--size-semantic-control-m); --size-semantic-input-s: var(--size-semantic-control-s); --size-semantic-button-l: var(--size-semantic-control-l); --size-semantic-button-m: var(--size-semantic-control-m); --size-semantic-button-s: var(--size-semantic-control-s); } [data-theme="dark"] { --color-aliases-overlay-inverse: rgba(255, 255, 255, 0.6); --color-aliases-overlay-soft: rgba(0, 0, 0, 0.3); --color-aliases-overlay-base: rgba(0, 0, 0, 0.6); --color-aliases-text-link-hover: rgba(0, 111, 255, 0.9); --color-aliases-surface-alpha-inverse-70: rgba(255, 255, 255, 0.7); --color-aliases-surface-alpha-inverse-50: rgba(255, 255, 255, 0.5); --color-aliases-surface-alpha-inverse-30: rgba(255, 255, 255, 0.3); --color-aliases-surface-alpha-inverse-10: rgba(255, 255, 255, 0.1); --color-aliases-surface-alpha-inverse: rgba(255, 255, 255, 0.3); --color-aliases-surface-alpha-70: rgba(0, 0, 0, 0.7); --color-aliases-surface-alpha-50: rgba(0, 0, 0, 0.5); --color-aliases-surface-alpha-30: rgba(0, 0, 0, 0.3); --color-aliases-surface-alpha-10: rgba(0, 0, 0, 0.1); --color-aliases-surface-alpha: rgba(0, 0, 0, 0.3); --color-aliases-surface-transparent: rgba(0, 0, 0, 0); --color-aliases-border-alpha-inverse-70: rgba(0, 0, 0, 0.7); --color-aliases-border-alpha-inverse-50: rgba(0, 0, 0, 0.5); --color-aliases-border-alpha-inverse-30: rgba(0, 0, 0, 0.3); --color-aliases-border-alpha-inverse-10: rgba(0, 0, 0, 0.1); --color-aliases-border-alpha-inverse: rgba(0, 0, 0, 0.1); --color-aliases-border-alpha-70: rgba(255, 255, 255, 0.7); --color-aliases-border-alpha-50: rgba(255, 255, 255, 0.5); --color-aliases-border-alpha-30: rgba(255, 255, 255, 0.3); --color-aliases-border-alpha-10: rgba(255, 255, 255, 0.1); --color-aliases-border-alpha: rgba(255, 255, 255, 0.1); --color-aliases-border-transparent: rgba(0, 0, 0, 0); --color-aliases-brand-primary-alpha-90: rgba(0, 111, 255, 0.9); --color-aliases-brand-primary-alpha-80: rgba(0, 111, 255, 0.8); --color-aliases-brand-primary-alpha-70: rgba(0, 111, 255, 0.7); --color-aliases-brand-primary-alpha-60: rgba(0, 111, 255, 0.6); --color-aliases-brand-primary-alpha-50: rgba(0, 111, 255, 0.5); --color-aliases-brand-primary-alpha-40: rgba(0, 111, 255, 0.4); --color-aliases-brand-primary-alpha-30: rgba(0, 111, 255, 0.3); --color-aliases-brand-primary-alpha-20: rgba(0, 111, 255, 0.2); --color-aliases-brand-primary-alpha-10: rgba(0, 111, 255, 0.1); --color-aliases-text-inverse-tertiary: var(--color-foundation-neutral-300); --color-aliases-text-inverse-secondary: var(--color-foundation-neutral-200); --color-aliases-text-inverse-primary: var(--color-foundation-neutral-white); --color-aliases-text-link: var(--color-foundation-blue-700); --color-aliases-text-disabled: var(--color-foundation-neutral-500); --color-aliases-text-tertiary: var(--color-foundation-neutral-300); --color-aliases-text-secondary: var(--color-foundation-neutral-200); --color-aliases-text-primary: var(--color-foundation-neutral-white); --color-aliases-surface-inverse: var(--color-foundation-neutral-white); --color-aliases-surface-muted: var(--color-foundation-neutral-900); --color-aliases-surface-layer-3: var(--color-foundation-neutral-800); --color-aliases-surface-layer-2: var(--color-foundation-neutral-900); --color-aliases-surface-layer-1: var(--color-foundation-neutral-1000); --color-aliases-surface-base: var(--color-foundation-neutral-1100); --color-aliases-feedback-info-bg: var(--color-foundation-blue-100); --color-aliases-feedback-info-fg: var(--color-foundation-blue-600); --color-aliases-feedback-error-bg: var(--color-foundation-red-100); --color-aliases-feedback-error-fg: var(--color-foundation-red-500); --color-aliases-feedback-warning-bg: var(--color-foundation-yellow-100); --color-aliases-feedback-warning-fg: var(--color-foundation-yellow-600); --color-aliases-feedback-success-bg: var(--color-foundation-green-200); --color-aliases-feedback-success-fg: var(--color-foundation-green-600); --color-aliases-border-inverse: var(--color-foundation-neutral-200); --color-aliases-border-muted: var(--color-foundation-neutral-1000); --color-aliases-border-layer-3: var(--color-foundation-neutral-600); --color-aliases-border-layer-2: var(--color-foundation-neutral-700); --color-aliases-border-layer-1: var(--color-foundation-neutral-800); --color-aliases-border-base: var(--color-foundation-neutral-900); --color-aliases-brand-accent: var(--color-foundation-orange-600); --color-aliases-brand-tertiary: var(--color-foundation-teal-500); --color-aliases-brand-secondary: var(--color-foundation-blue-200); --color-aliases-brand-primary: var(--color-foundation-blue-700); }