/* Worlty Design System: supplied colors.css + src.zip/theme.css. * colors SHA256: 234610072d1ccfceffc08b75f3c9014176c640793407c885092df7723a686074 * Tailwind @theme declarations are exposed as native :root variables; values are unchanged. */ :root { --text-color-primary: var(--text-primary); --text-color-secondary: var(--text-secondary); --text-color-tertiary: var(--text-tertiary); --text-color-subtle: var(--text-subtle); --text-color-info: var(--text-info); --text-color-info-bold: var(--text-info-bold); --text-color-warning: var(--text-warning); --text-color-warning-bold: var(--text-warning-bold); --text-color-success: var(--text-success); --text-color-success-bold: var(--text-success-bold); --text-color-danger: var(--text-danger); --text-color-danger-bold: var(--text-danger-bold); --text-color-disabled: var(--text-disabled); --text-color-inverse: var(--text-inverse); --text-color-inverse-subtle: var(--text-inverse-subtle); --text-color-interactive-primary: var(--text-interactive-primary); --text-color-interactive-primary-hovered: var( --text-interactive-primary-hovered ); --text-color-interactive-primary-pressed: var( --text-interactive-primary-pressed ); --text-color-interactive-neutral: var(--text-interactive-neutral); --text-color-interactive-neutral-hovered: var( --text-interactive-neutral-hovered ); --text-color-interactive-neutral-pressed: var( --text-interactive-neutral-pressed ); --text-color-interactive-neutral-subtle: var( --text-interactive-neutral-subtle ); --text-color-interactive-neutral-subtle-hovered: var( --text-interactive-neutral-subtle-hovered ); --text-color-interactive-neutral-subtle-pressed: var( --text-interactive-neutral-subtle-pressed ); --text-color-interactive-selected: var(--text-interactive-selected); --text-color-interactive-inverse: var(--text-interactive-inverse); --text-color-interactive-inverse-hovered: var( --text-interactive-inverse-hovered ); --text-color-interactive-inverse-pressed: var( --text-interactive-inverse-pressed ); --text-color-accent-primary: var(--text-accent-primary); --text-color-accent-primary-bold: var(--text-accent-primary-bold); --text-color-accent-primary-subtle: var(--text-accent-primary-subtle); --text-color-accent-primary-subtler: var(--text-accent-primary-subtler); --text-color-accent-primary-subtlest: var(--text-accent-primary-subtlest); --text-color-accent-secondary: var(--text-accent-secondary); --text-color-accent-secondary-bold: var(--text-accent-secondary-bold); --text-color-accent-secondary-subtle: var(--text-accent-secondary-subtle); --text-color-accent-secondary-subtler: var(--text-accent-secondary-subtler); --text-color-accent-secondary-subtlest: var(--text-accent-secondary-subtlest); --text-color-accent-gradient-start: var(--text-accent-gradient-start); --text-color-accent-gradient-end: var(--text-accent-gradient-end); --text-color-accent-gradient-subtle-start: var( --text-accent-gradient-subtle-start ); --text-color-accent-gradient-subtle-end: var( --text-accent-gradient-subtle-end ); --background-color-primary: var(--bg-primary); --background-color-secondary: var(--bg-secondary); --background-color-tertiary: var(--bg-tertiary); --background-color-subtle: var(--bg-subtle); --background-color-info-bold: var(--bg-info-bold); --background-color-info-subtle: var(--bg-info-subtle); --background-color-warning-bold: var(--bg-warning-bold); --background-color-warning-subtle: var(--bg-warning-subtle); --background-color-danger-bold: var(--bg-danger-bold); --background-color-danger-subtle: var(--bg-danger-subtle); --background-color-success-bold: var(--bg-success-bold); --background-color-success-subtle: var(--bg-success-subtle); --background-color-inverse: var(--bg-inverse); --background-color-inverse-bold: var(--bg-inverse-bold); --background-color-disabled: var(--bg-disabled); --background-color-disabled-subtle: var(--bg-disabled-subtle); --background-color-dimmer: var(--bg-dimmer); --background-color-interactive-primary: var(--bg-interactive-primary); --background-color-interactive-primary-hovered: var( --bg-interactive-primary-hovered ); --background-color-interactive-primary-pressed: var( --bg-interactive-primary-pressed ); --background-color-interactive-primary-subtle: var( --bg-interactive-primary-subtle ); --background-color-interactive-primary-subtle-hovered: var( --bg-interactive-primary-subtle-hovered ); --background-color-interactive-primary-subtle-pressed: var( --bg-interactive-primary-subtle-pressed ); --background-color-interactive-neutral: var(--bg-interactive-neutral); --background-color-interactive-neutral-hovered: var( --bg-interactive-neutral-hovered ); --background-color-interactive-neutral-pressed: var( --bg-interactive-neutral-pressed ); --background-color-interactive-neutral-subtle: var( --bg-interactive-neutral-subtle ); --background-color-interactive-neutral-subtle-hovered: var( --bg-interactive-neutral-subtle-hovered ); --background-color-interactive-neutral-subtle-pressed: var( --bg-interactive-neutral-subtle-pressed ); --background-color-interactive-neutral-bolder: var( --bg-interactive-neutral-bolder ); --background-color-interactive-neutral-bolder-hovered: var( --bg-interactive-neutral-bolder-hovered ); --background-color-interactive-neutral-bolder-pressed: var( --bg-interactive-neutral-bolder-pressed ); --background-color-interactive-transparent-hovered: var( --bg-interactive-transparent-hovered ); --background-color-interactive-transparent-pressed: var( --bg-interactive-transparent-pressed ); --background-color-interactive-danger: var(--bg-interactive-danger); --background-color-interactive-danger-hovered: var( --bg-interactive-danger-hovered ); --background-color-interactive-danger-pressed: var( --bg-interactive-danger-pressed ); --background-color-interactive-selected: var(--bg-interactive-selected); --background-color-interactive-selected-hovered: var( --bg-interactive-selected-hovered ); --background-color-interactive-selected-pressed: var( --bg-interactive-selected-pressed ); --background-color-accent-primary-boldest: var(--bg-accent-primary-boldest); --background-color-accent-primary-bolder: var(--bg-accent-primary-bolder); --background-color-accent-primary: var(--bg-accent-primary); --background-color-accent-primary-subtle: var(--bg-accent-primary-subtle); --background-color-accent-primary-subtler: var(--bg-accent-primary-subtler); --background-color-accent-primary-subtlest: var(--bg-accent-primary-subtlest); --background-color-accent-secondary-boldest: var( --bg-accent-secondary-boldest ); --background-color-accent-secondary-bolder: var(--bg-accent-secondary-bolder); --background-color-accent-secondary: var(--bg-accent-secondary); --background-color-accent-secondary-subtle: var(--bg-accent-secondary-subtle); --background-color-accent-secondary-subtler: var( --bg-accent-secondary-subtler ); --background-color-accent-secondary-subtlest: var( --bg-accent-secondary-subtlest ); --background-color-accent-gradient-start: var(--bg-accent-gradient-start); --background-color-accent-gradient-end: var(--bg-accent-gradient-end); --background-color-text-accent-gradient-start: var(--text-accent-gradient-start); --background-color-text-accent-gradient-end: var(--text-accent-gradient-end); --background-color-text-accent-primary-subtle: var(--text-accent-primary-subtle); --background-color-text-accent-secondary-subtle: var(--text-accent-secondary-subtle); --background-color-accent-gradient-subtle-start: var( --bg-accent-gradient-subtle-start ); --background-color-accent-gradient-subtle-end: var( --bg-accent-gradient-subtle-end ); --background-color-accent-gradient-subtler-start: var( --bg-accent-gradient-subtler-start ); --background-color-accent-gradient-subtler-end: var( --bg-accent-gradient-subtler-end ); --background-color-accent-gradient-subtlest-start: var( --bg-accent-gradient-subtlest-start ); --background-color-accent-gradient-subtlest-end: var( --bg-accent-gradient-subtlest-end ); --border-color-primary: var(--border-primary); --border-color-secondary: var(--border-secondary); --border-color-tertiary: var(--border-tertiary); --border-color-subtle: var(--border-subtle); --border-color-focus-ring: var(--border-focus-ring); --border-color-info: var(--border-info); --border-color-info-subtle: var(--border-info-subtle); --border-color-warning: var(--border-warning); --border-color-warning-subtle: var(--border-warning-subtle); --border-color-success: var(--border-success); --border-color-success-subtle: var(--border-success-subtle); --border-color-danger: var(--border-danger); --border-color-danger-subtle: var(--border-danger-subtle); --border-color-disabled: var(--border-disabled); --border-color-interactive-primary: var(--border-interactive-primary); --border-color-interactive-primary-hovered: var( --border-interactive-primary-hovered ); --border-color-interactive-primary-pressed: var( --border-interactive-primary-pressed ); --border-color-interactive-neutral: var(--border-interactive-neutral); --border-color-interactive-neutral-hovered: var( --border-interactive-neutral-hovered ); --border-color-interactive-neutral-pressed: var( --border-interactive-neutral-pressed ); --border-color-interactive-neutral-subtle: var( --border-interactive-neutral-subtle ); --border-color-interactive-neutral-subtle-hovered: var( --border-interactive-neutral-subtle-hovered ); --border-color-interactive-neutral-subtle-pressed: var( --border-interactive-neutral-subtle-pressed ); --border-color-interactive-selected: var(--border-interactive-selected); --ring-color-focus: var(--border-color-focus-ring); --color-icon-primary: var(--icon-primary); --color-icon-secondary: var(--icon-secondary); --color-icon-tertiary: var(--icon-tertiary); --color-icon-info: var(--icon-info); --color-icon-warning: var(--icon-warning); --color-icon-success: var(--icon-success); --color-icon-danger: var(--icon-danger); --color-icon-disabled: var(--icon-disabled); --color-icon-inverse: var(--icon-inverse); --color-icon-interactive-primary: var(--icon-interactive-primary); --color-icon-interactive-primary-hovered: var( --icon-interactive-primary-hovered ); --color-icon-interactive-primary-pressed: var( --icon-interactive-primary-pressed ); --color-icon-interactive-neutral: var(--icon-interactive-neutral); --color-icon-interactive-neutral-hovered: var( --icon-interactive-neutral-hovered ); --color-icon-interactive-neutral-pressed: var( --icon-interactive-neutral-pressed ); --color-icon-interactive-neutral-subtle: var( --icon-interactive-neutral-subtle ); --color-icon-interactive-neutral-subtle-hovered: var( --icon-interactive-neutral-subtle-hovered ); --color-icon-interactive-neutral-subtle-pressed: var( --icon-interactive-neutral-subtle-pressed ); --color-icon-interactive-selected: var(--icon-interactive-selected); --color-icon-interactive-inverse: var(--icon-interactive-inverse); --color-icon-interactive-inverse-hovered: var( --icon-interactive-inverse-hovered ); --color-icon-interactive-inverse-pressed: var( --icon-interactive-inverse-pressed ); --color-icon-accent-primary: var(--icon-accent-primary); --color-icon-accent-primary-subtle: var(--icon-accent-primary-subtle); --color-icon-accent-primary-subtler: var(--icon-accent-primary-subtler); --color-icon-accent-primary-subtlest: var(--icon-accent-primary-subtlest); --color-icon-accent-secondary: var(--icon-accent-secondary); --color-icon-accent-secondary-subtle: var(--icon-accent-secondary-subtle); --color-icon-accent-secondary-subtler: var(--icon-accent-secondary-subtler); --color-icon-accent-secondary-subtlest: var(--icon-accent-secondary-subtlest); --color-elevation-shadow-core: var(--elevation-shadow-core); --color-elevation-shadow-emphasize-cast: var( --elevation-shadow-emphasize-cast ); --color-elevation-shadow-strong-cast: var(--elevation-shadow-strong-cast); --color-elevation-shadow-heavy-cast: var(--elevation-shadow-heavy-cast); --color-elevation-light-core: var(--elevation-light-core); --color-elevation-light-emphasize-cast: var(--elevation-light-emphasize-cast); --color-elevation-light-strong-cast: var(--elevation-light-strong-cast); --color-elevation-light-heavy-cast: var(--elevation-light-heavy-cast); } :root { --color-gray-25: #f4f7fb; --color-gray-25-a5: #f4f7fb0d; --color-gray-25-a10: #f4f7fb1a; --color-gray-25-a15: #f4f7fb26; --color-gray-25-a20: #f4f7fb33; --color-gray-50: #e9edf1; --color-gray-100: #d9dfe4; --color-gray-200: #c6cfd4; --color-gray-300: #a8b4bb; --color-gray-400: #8d9ba4; --color-gray-500: #68737d; --color-gray-600: #474d55; --color-gray-700: #2f333a; --color-gray-800: #25282e; --color-gray-900: #1d1f22; --color-gray-900-a5: #1d1f220d; --color-gray-900-a10: #1d1f221a; --color-gray-900-a15: #1d1f2226; --color-gray-900-a20: #1d1f2233; --color-gray-900-a25: #1d1f2240; --color-gray-900-a30: #1d1f224d; --color-gray-900-a35: #1c1e2259; --color-gray-900-a40: #1c1e2266; --color-gray-900-a60: #1c1e2299; --color-blue-50: #ebf2ff; --color-blue-100: #cddeff; --color-blue-200: #b4ccff; --color-blue-300: #8baeff; --color-blue-400: #5c8bf9; --color-blue-400-a10: #5c8bf91a; --color-blue-400-a15: #5c8bf926; --color-blue-400-a20: #5c8bf933; --color-blue-400-a40: #5c8bf966; --color-blue-500: #386bf4; --color-blue-500-a10: #386bf41a; --color-blue-500-a15: #386bf426; --color-blue-500-a20: #386bf433; --color-blue-500-a40: #386bf466; --color-blue-500-a60: #386bf499; --color-blue-600: #234dbc; --color-blue-700: #19398d; --color-blue-800: #1b2e5d; --color-blue-900: #202a42; --color-green-50: #e4f6f2; --color-green-100: #c6efe6; --color-green-200: #9be4d3; --color-green-300: #6cdbc0; --color-green-400: #30caa4; --color-green-500: #00b087; --color-green-600: #187c64; --color-green-700: #1c5f4f; --color-green-800: #154539; --color-green-900: #10332a; --color-yellow-50: #fcf7e6; --color-yellow-100: #fef1c6; --color-yellow-200: #fedf88; --color-yellow-300: #ffc84b; --color-yellow-400: #fdb022; --color-yellow-500: #f79008; --color-yellow-600: #dc6903; --color-yellow-700: #a44c19; --color-yellow-800: #76361a; --color-yellow-900: #532410; --color-red-50: #ffecea; --color-red-100: #ffd5d2; --color-red-200: #ffaea9; --color-red-300: #ff867e; --color-red-400: #f36258; --color-red-500: #e2483c; --color-red-600: #c63226; --color-red-700: #981a10; --color-red-800: #6c1710; --color-red-900: #451611; --color-cyan-50: #e3f6fc; --color-cyan-100: #c9ecf8; --color-cyan-200: #a7dcef; --color-cyan-300: #7bc9e3; --color-cyan-400: #53b2d2; --color-cyan-500: #078db9; --color-cyan-600: #077497; --color-cyan-700: #0f5267; --color-cyan-800: #123c4a; --color-cyan-900: #112b31; --color-neutral-25: var(--color-gray-25); --color-neutral-25: var(--color-gray-25); --color-neutral-25-a5: var(--color-gray-25-a5); --color-neutral-25-a10: var(--color-gray-25-a10); --color-neutral-25-a15: var(--color-gray-25-a15); --color-neutral-25-a20: var(--color-gray-25-a20); --color-neutral-50: var(--color-gray-50); --color-neutral-100: var(--color-gray-100); --color-neutral-200: var(--color-gray-200); --color-neutral-300: var(--color-gray-300); --color-neutral-400: var(--color-gray-400); --color-neutral-500: var(--color-gray-500); --color-neutral-600: var(--color-gray-600); --color-neutral-700: var(--color-gray-700); --color-neutral-800: var(--color-gray-800); --color-neutral-900: var(--color-gray-900); --color-neutral-900-a5: var(--color-gray-900-a5); --color-neutral-900-a10: var(--color-gray-900-a10); --color-neutral-900-a15: var(--color-gray-900-a15); --color-neutral-900-a20: var(--color-gray-900-a20); --color-neutral-900-a25: var(--color-gray-900-a25); --color-neutral-900-a30: var(--color-gray-900-a30); --color-neutral-900-a35: var(--color-gray-900-a35); --color-neutral-900-a40: var(--color-gray-900-a40); --color-neutral-900-a60: var(--color-gray-900-a60); --color-brand-primary-50: var(--color-blue-50); --color-brand-primary-100: var(--color-blue-100); --color-brand-primary-200: var(--color-blue-200); --color-brand-primary-300: var(--color-blue-300); --color-brand-primary-400: var(--color-blue-400); --color-brand-primary-400-a10: var(--color-blue-400-a10); --color-brand-primary-400-a15: var(--color-blue-400-a15); --color-brand-primary-400-a20: var(--color-blue-400-a20); --color-brand-primary-400-a40: var(--color-blue-400-a40); --color-brand-primary-500: var(--color-blue-500); --color-brand-primary-500-a10: var(--color-blue-500-a10); --color-brand-primary-500-a15: var(--color-blue-500-a15); --color-brand-primary-500-a20: var(--color-blue-500-a20); --color-brand-primary-500-a40: var(--color-blue-500-a40); --color-brand-primary-500-a60: var(--color-blue-500-a60); --color-brand-primary-600: var(--color-blue-600); --color-brand-primary-700: var(--color-blue-700); --color-brand-primary-800: var(--color-blue-800); --color-brand-primary-900: var(--color-blue-900); --color-brand-secondary-50: var(--color-green-50); --color-brand-secondary-100: var(--color-green-100); --color-brand-secondary-200: var(--color-green-200); --color-brand-secondary-300: var(--color-green-300); --color-brand-secondary-400: var(--color-green-400); --color-brand-secondary-500: var(--color-green-500); --color-brand-secondary-600: var(--color-green-600); --color-brand-secondary-700: var(--color-green-700); --color-brand-secondary-800: var(--color-green-800); --color-brand-secondary-900: var(--color-green-900); --color-info-50: var(--color-cyan-50); --color-info-100: var(--color-cyan-100); --color-info-200: var(--color-cyan-200); --color-info-300: var(--color-cyan-300); --color-info-400: var(--color-cyan-400); --color-info-500: var(--color-cyan-500); --color-info-600: var(--color-cyan-600); --color-info-700: var(--color-cyan-700); --color-info-800: var(--color-cyan-800); --color-info-900: var(--color-cyan-900); --color-success-50: var(--color-green-50); --color-success-100: var(--color-green-100); --color-success-200: var(--color-green-200); --color-success-300: var(--color-green-300); --color-success-400: var(--color-green-400); --color-success-500: var(--color-green-500); --color-success-600: var(--color-green-600); --color-success-700: var(--color-green-700); --color-success-800: var(--color-green-800); --color-success-900: var(--color-green-900); --color-warning-50: var(--color-yellow-50); --color-warning-100: var(--color-yellow-100); --color-warning-200: var(--color-yellow-200); --color-warning-300: var(--color-yellow-300); --color-warning-400: var(--color-yellow-400); --color-warning-500: var(--color-yellow-500); --color-warning-600: var(--color-yellow-600); --color-warning-700: var(--color-yellow-700); --color-warning-800: var(--color-yellow-800); --color-warning-900: var(--color-yellow-900); --color-danger-50: var(--color-red-50); --color-danger-100: var(--color-red-100); --color-danger-200: var(--color-red-200); --color-danger-300: var(--color-red-300); --color-danger-400: var(--color-red-400); --color-danger-500: var(--color-red-500); --color-danger-600: var(--color-red-600); --color-danger-700: var(--color-red-700); --color-danger-800: var(--color-red-800); --color-danger-900: var(--color-red-900); --color-white: #ffffff; --color-black: #000000; } :root, [data-theme="light"] { --text-primary: var(--color-black); --text-secondary: var(--color-neutral-800); --text-tertiary: var(--color-neutral-600); --text-subtle: var(--color-neutral-500); --text-info: var(--color-info-500); --text-info-bold: var(--color-info-700); --text-warning: var(--color-warning-500); --text-warning-bold: var(--color-warning-700); --text-success: var(--color-success-500); --text-success-bold: var(--color-success-700); --text-danger: var(--color-danger-500); --text-danger-bold: var(--color-danger-700); --text-disabled: var(--color-neutral-900-a30); --text-inverse: var(--color-white); --text-inverse-subtle: var(--color-neutral-100); --text-interactive-primary: var(--color-brand-primary-600); --text-interactive-primary-hovered: var(--color-brand-primary-700); --text-interactive-primary-pressed: var(--color-brand-primary-800); --text-interactive-neutral: var(--color-neutral-700); --text-interactive-neutral-hovered: var(--color-neutral-800); --text-interactive-neutral-pressed: var(--color-neutral-900); --text-interactive-neutral-subtle: var(--color-neutral-400); --text-interactive-neutral-subtle-hovered: var(--color-neutral-500); --text-interactive-neutral-subtle-pressed: var(--color-neutral-600); --text-interactive-selected: var(--color-brand-primary-600); --text-interactive-inverse: var(--color-neutral-25); --text-interactive-inverse-hovered: var(--color-neutral-50); --text-interactive-inverse-pressed: var(--color-neutral-100); --text-accent-primary: var(--color-brand-primary-500); --text-accent-primary-bold: var(--color-brand-primary-600); --text-accent-primary-subtle: var(--color-brand-primary-300); --text-accent-primary-subtler: var(--color-brand-primary-200); --text-accent-primary-subtlest: var(--color-brand-primary-50); --text-accent-secondary: var(--color-brand-secondary-500); --text-accent-secondary-bold: var(--color-brand-secondary-600); --text-accent-secondary-subtle: var(--color-brand-secondary-300); --text-accent-secondary-subtler: var(--color-brand-secondary-200); --text-accent-secondary-subtlest: var(--color-brand-secondary-50); --text-accent-gradient-start: var(--color-brand-primary-500); --text-accent-gradient-end: var(--color-brand-secondary-300); --text-accent-gradient-subtle-start: var(--color-brand-primary-400); --text-accent-gradient-subtle-end: var(--color-brand-secondary-200); --bg-primary: var(--color-white); --bg-secondary: var(--color-neutral-25); --bg-tertiary: var(--color-neutral-50); --bg-subtle: var(--color-neutral-200); --bg-info-bold: var(--color-info-500); --bg-info-subtle: var(--color-info-50); --bg-warning-bold: var(--color-warning-400); --bg-warning-subtle: var(--color-warning-50); --bg-danger-bold: var(--color-danger-500); --bg-danger-subtle: var(--color-danger-50); --bg-success-bold: var(--color-success-500); --bg-success-subtle: var(--color-success-50); --bg-inverse: var(--color-neutral-700); --bg-inverse-bold: var(--color-neutral-900); --bg-disabled: var(--color-neutral-50); --bg-disabled-subtle: var(--color-neutral-100); --bg-dimmer: var(--color-neutral-900-a60); --bg-interactive-primary: var(--color-brand-primary-500); --bg-interactive-primary-hovered: var(--color-brand-primary-600); --bg-interactive-primary-pressed: var(--color-brand-primary-700); --bg-interactive-primary-subtle: var(--color-brand-primary-50); --bg-interactive-primary-subtle-hovered: var(--color-brand-primary-100); --bg-interactive-primary-subtle-pressed: var(--color-brand-primary-200); --bg-interactive-neutral: var(--color-neutral-50); --bg-interactive-neutral-hovered: var(--color-neutral-100); --bg-interactive-neutral-pressed: var(--color-neutral-200); --bg-interactive-neutral-subtle: var(--color-neutral-25); --bg-interactive-neutral-subtle-hovered: var(--color-neutral-50); --bg-interactive-neutral-subtle-pressed: var(--color-neutral-100); --bg-interactive-neutral-bolder: var(--color-neutral-700); --bg-interactive-neutral-bolder-hovered: var(--color-neutral-600); --bg-interactive-neutral-bolder-pressed: var(--color-neutral-500); --bg-interactive-transparent-hovered: var(--color-neutral-900-a5); --bg-interactive-transparent-pressed: var(--color-neutral-900-a10); --bg-interactive-danger: var(--color-danger-500); --bg-interactive-danger-hovered: var(--color-danger-600); --bg-interactive-danger-pressed: var(--color-danger-700); --bg-interactive-selected: var(--color-white); --bg-interactive-selected-hovered: var(--color-brand-primary-50); --bg-interactive-selected-pressed: var(--color-brand-primary-100); --bg-accent-primary-boldest: var(--color-brand-primary-500); --bg-accent-primary-bolder: var(--color-brand-primary-400); --bg-accent-primary: var(--color-brand-primary-300); --bg-accent-primary-subtle: var(--color-brand-primary-200); --bg-accent-primary-subtler: var(--color-brand-primary-100); --bg-accent-primary-subtlest: var(--color-brand-primary-50); --bg-accent-secondary-boldest: var(--color-brand-secondary-500); --bg-accent-secondary-bolder: var(--color-brand-secondary-400); --bg-accent-secondary: var(--color-brand-secondary-300); --bg-accent-secondary-subtle: var(--color-brand-secondary-200); --bg-accent-secondary-subtler: var(--color-brand-secondary-100); --bg-accent-secondary-subtlest: var(--color-brand-secondary-50); --bg-accent-gradient-start: var(--color-brand-primary-400); --bg-accent-gradient-end: var(--color-brand-secondary-300); --bg-accent-gradient-subtle-start: var(--color-brand-primary-300); --bg-accent-gradient-subtle-end: var(--color-brand-secondary-200); --bg-accent-gradient-subtler-start: var(--color-brand-primary-100); --bg-accent-gradient-subtler-end: var(--color-brand-secondary-100); --bg-accent-gradient-subtlest-start: var(--color-brand-primary-50); --bg-accent-gradient-subtlest-end: var(--color-brand-secondary-50); --border-primary: var(--color-neutral-400); --border-secondary: var(--color-neutral-200); --border-tertiary: var(--color-neutral-100); --border-subtle: var(--color-neutral-50); --border-focus-ring: var(--color-brand-primary-500); --border-info: var(--color-info-500); --border-info-subtle: var(--color-info-300); --border-warning: var(--color-warning-500); --border-warning-subtle: var(--color-warning-200); --border-success: var(--color-success-500); --border-success-subtle: var(--color-success-300); --border-danger: var(--color-danger-500); --border-danger-subtle: var(--color-danger-300); --border-disabled: var(--color-neutral-200); --border-interactive-primary: var(--color-brand-primary-500); --border-interactive-primary-hovered: var(--color-brand-primary-600); --border-interactive-primary-pressed: var(--color-brand-primary-700); --border-interactive-neutral: var(--color-neutral-500); --border-interactive-neutral-hovered: var(--color-neutral-600); --border-interactive-neutral-pressed: var(--color-neutral-700); --border-interactive-neutral-subtle: var(--color-neutral-200); --border-interactive-neutral-subtle-hovered: var(--color-neutral-300); --border-interactive-neutral-subtle-pressed: var(--color-neutral-400); --border-interactive-selected: var(--color-brand-primary-500); --icon-primary: var(--color-neutral-900); --icon-secondary: var(--color-neutral-800); --icon-tertiary: var(--color-neutral-600); --icon-info: var(--color-info-500); --icon-warning: var(--color-warning-500); --icon-success: var(--color-success-500); --icon-danger: var(--color-danger-500); --icon-disabled: var(--color-neutral-900-a30); --icon-inverse: var(--color-white); --icon-interactive-primary: var(--color-brand-primary-500); --icon-interactive-primary-hovered: var(--color-brand-primary-600); --icon-interactive-primary-pressed: var(--color-brand-primary-700); --icon-interactive-neutral: var(--color-neutral-600); --icon-interactive-neutral-hovered: var(--color-neutral-700); --icon-interactive-neutral-pressed: var(--color-neutral-800); --icon-interactive-neutral-subtle: var(--color-neutral-400); --icon-interactive-neutral-subtle-hovered: var(--color-neutral-500); --icon-interactive-neutral-subtle-pressed: var(--color-neutral-600); --icon-interactive-selected: var(--color-brand-primary-500); --icon-interactive-inverse: var(--color-neutral-25); --icon-interactive-inverse-hovered: var(--color-neutral-50); --icon-interactive-inverse-pressed: var(--color-neutral-100); --icon-accent-primary: var(--color-brand-primary-500); --icon-accent-primary-subtle: var(--color-brand-primary-300); --icon-accent-primary-subtler: var(--color-brand-primary-200); --icon-accent-primary-subtlest: var(--color-brand-primary-50); --icon-accent-secondary: var(--color-brand-secondary-500); --icon-accent-secondary-subtle: var(--color-brand-secondary-400); --icon-accent-secondary-subtler: var(--color-brand-secondary-300); --icon-accent-secondary-subtlest: var(--color-brand-secondary-200); --elevation-shadow-core: var(--color-neutral-900-a5); --elevation-shadow-emphasize-cast: var(--color-neutral-900-a15); --elevation-shadow-strong-cast: var(--color-neutral-900-a30); --elevation-shadow-heavy-cast: var(--color-neutral-900-a40); --elevation-light-core: var(--color-brand-primary-400-a20); --elevation-light-emphasize-cast: var(--color-brand-primary-500-a20); --elevation-light-strong-cast: var(--color-brand-primary-500-a40); --elevation-light-heavy-cast: var(--color-brand-primary-500-a60); } [data-theme="dark"] { --text-primary: var(--color-white); --text-secondary: var(--color-neutral-100); --text-tertiary: var(--color-neutral-300); --text-subtle: var(--color-neutral-400); --text-info: var(--color-info-400); --text-info-bold: var(--color-info-200); --text-warning: var(--color-warning-400); --text-warning-bold: var(--color-warning-200); --text-success: var(--color-success-400); --text-success-bold: var(--color-success-200); --text-danger: var(--color-danger-400); --text-danger-bold: var(--color-danger-200); --text-disabled: var(--color-neutral-25-a20); --text-inverse: var(--color-neutral-900); --text-inverse-subtle: var(--color-neutral-800); --text-interactive-primary: var(--color-brand-primary-300); --text-interactive-primary-hovered: var(--color-brand-primary-200); --text-interactive-primary-pressed: var(--color-brand-primary-100); --text-interactive-neutral: var(--color-neutral-200); --text-interactive-neutral-hovered: var(--color-neutral-100); --text-interactive-neutral-pressed: var(--color-neutral-50); --text-interactive-neutral-subtle: var(--color-neutral-500); --text-interactive-neutral-subtle-hovered: var(--color-neutral-400); --text-interactive-neutral-subtle-pressed: var(--color-neutral-300); --text-interactive-selected: var(--color-brand-primary-300); --text-interactive-inverse: var(--color-neutral-900); --text-interactive-inverse-hovered: var(--color-neutral-800); --text-interactive-inverse-pressed: var(--color-neutral-700); --text-accent-primary: var(--color-brand-primary-400); --text-accent-primary-bold: var(--color-brand-primary-300); --text-accent-primary-subtle: var(--color-brand-primary-600); --text-accent-primary-subtler: var(--color-brand-primary-700); --text-accent-primary-subtlest: var(--color-brand-primary-900); --text-accent-secondary: var(--color-brand-secondary-400); --text-accent-secondary-bold: var(--color-brand-secondary-300); --text-accent-secondary-subtle: var(--color-brand-secondary-600); --text-accent-secondary-subtler: var(--color-brand-secondary-700); --text-accent-secondary-subtlest: var(--color-brand-secondary-900); --text-accent-gradient-start: var(--color-brand-primary-400); --text-accent-gradient-end: var(--color-brand-secondary-600); --text-accent-gradient-subtle-start: var(--color-brand-primary-500); --text-accent-gradient-subtle-end: var(--color-brand-secondary-700); --bg-primary: var(--color-neutral-900); --bg-secondary: var(--color-neutral-800); --bg-tertiary: var(--color-neutral-700); --bg-subtle: var(--color-neutral-600); --bg-info-bold: var(--color-info-400); --bg-info-subtle: var(--color-info-800); --bg-warning-bold: var(--color-warning-600); --bg-warning-subtle: var(--color-warning-900); --bg-danger-bold: var(--color-danger-400); --bg-danger-subtle: var(--color-danger-900); --bg-success-bold: var(--color-success-400); --bg-success-subtle: var(--color-success-900); --bg-inverse: var(--color-neutral-100); --bg-inverse-bold: var(--color-neutral-25); --bg-disabled: var(--color-neutral-800); --bg-disabled-subtle: var(--color-neutral-700); --bg-dimmer: var(--color-neutral-900-a60); --bg-interactive-primary: var(--color-brand-primary-400); --bg-interactive-primary-hovered: var(--color-brand-primary-300); --bg-interactive-primary-pressed: var(--color-brand-primary-200); --bg-interactive-primary-subtle: var(--color-brand-primary-900); --bg-interactive-primary-subtle-hovered: var(--color-brand-primary-800); --bg-interactive-primary-subtle-pressed: var(--color-brand-primary-700); --bg-interactive-neutral: var(--color-neutral-700); --bg-interactive-neutral-hovered: var(--color-neutral-600); --bg-interactive-neutral-pressed: var(--color-neutral-500); --bg-interactive-neutral-subtle: var(--color-neutral-800); --bg-interactive-neutral-subtle-hovered: var(--color-neutral-700); --bg-interactive-neutral-subtle-pressed: var(--color-neutral-600); --bg-interactive-neutral-bolder: var(--color-neutral-50); --bg-interactive-neutral-bolder-hovered: var(--color-neutral-100); --bg-interactive-neutral-bolder-pressed: var(--color-neutral-200); --bg-interactive-transparent-hovered: var(--color-neutral-25-a5); --bg-interactive-transparent-pressed: var(--color-gray-25-a10); --bg-interactive-danger: var(--color-danger-500); --bg-interactive-danger-hovered: var(--color-danger-400); --bg-interactive-danger-pressed: var(--color-danger-300); --bg-interactive-selected: var(--color-neutral-900); --bg-interactive-selected-hovered: var(--color-brand-primary-900); --bg-interactive-selected-pressed: var(--color-brand-primary-800); --bg-accent-primary-boldest: var(--color-brand-primary-400); --bg-accent-primary-bolder: var(--color-brand-primary-500); --bg-accent-primary: var(--color-brand-primary-600); --bg-accent-primary-subtle: var(--color-brand-primary-700); --bg-accent-primary-subtler: var(--color-brand-primary-800); --bg-accent-primary-subtlest: var(--color-brand-primary-900); --bg-accent-secondary-boldest: var(--color-brand-secondary-400); --bg-accent-secondary-bolder: var(--color-brand-secondary-500); --bg-accent-secondary: var(--color-brand-secondary-600); --bg-accent-secondary-subtle: var(--color-brand-secondary-700); --bg-accent-secondary-subtler: var(--color-brand-secondary-800); --bg-accent-secondary-subtlest: var(--color-brand-secondary-900); --bg-accent-gradient-start: var(--color-brand-primary-500); --bg-accent-gradient-end: var(--color-brand-secondary-600); --bg-accent-gradient-subtle-start: var(--color-brand-primary-600); --bg-accent-gradient-subtle-end: var(--color-brand-secondary-700); --bg-accent-gradient-subtler-start: var(--color-brand-primary-800); --bg-accent-gradient-subtler-end: var(--color-brand-secondary-800); --bg-accent-gradient-subtlest-start: var(--color-brand-primary-900); --bg-accent-gradient-subtlest-end: var(--color-brand-secondary-900); --border-primary: var(--color-neutral-500); --border-secondary: var(--color-neutral-600); --border-tertiary: var(--color-neutral-700); --border-subtle: var(--color-neutral-800); --border-focus-ring: var(--color-brand-primary-400); --border-info: var(--color-info-400); --border-info-subtle: var(--color-info-600); --border-warning: var(--color-warning-400); --border-warning-subtle: var(--color-warning-600); --border-success: var(--color-success-400); --border-success-subtle: var(--color-success-600); --border-danger: var(--color-danger-400); --border-danger-subtle: var(--color-danger-600); --border-disabled: var(--color-neutral-700); --border-interactive-primary: var(--color-brand-primary-400); --border-interactive-primary-hovered: var(--color-brand-primary-300); --border-interactive-primary-pressed: var(--color-brand-primary-200); --border-interactive-neutral: var(--color-neutral-400); --border-interactive-neutral-hovered: var(--color-neutral-300); --border-interactive-neutral-pressed: var(--color-neutral-200); --border-interactive-neutral-subtle: var(--color-neutral-600); --border-interactive-neutral-subtle-hovered: var(--color-neutral-500); --border-interactive-neutral-subtle-pressed: var(--color-neutral-400); --border-interactive-selected: var(--color-brand-primary-400); --icon-primary: var(--color-neutral-25); --icon-secondary: var(--color-neutral-100); --icon-tertiary: var(--color-neutral-300); --icon-info: var(--color-info-400); --icon-warning: var(--color-warning-400); --icon-success: var(--color-success-400); --icon-danger: var(--color-danger-400); --icon-disabled: var(--color-neutral-25-a20); --icon-inverse: var(--color-neutral-900); --icon-interactive-primary: var(--color-brand-primary-400); --icon-interactive-primary-hovered: var(--color-brand-primary-300); --icon-interactive-primary-pressed: var(--color-brand-primary-200); --icon-interactive-neutral: var(--color-neutral-300); --icon-interactive-neutral-hovered: var(--color-neutral-200); --icon-interactive-neutral-pressed: var(--color-neutral-100); --icon-interactive-neutral-subtle: var(--color-neutral-500); --icon-interactive-neutral-subtle-hovered: var(--color-neutral-400); --icon-interactive-neutral-subtle-pressed: var(--color-neutral-300); --icon-interactive-selected: var(--color-brand-primary-400); --icon-interactive-inverse: var(--color-neutral-800); --icon-interactive-inverse-hovered: var(--color-neutral-700); --icon-interactive-inverse-pressed: var(--color-neutral-600); --icon-accent-primary: var(--color-brand-primary-400); --icon-accent-primary-subtle: var(--color-brand-primary-600); --icon-accent-primary-subtler: var(--color-brand-primary-700); --icon-accent-primary-subtlest: var(--color-brand-primary-900); --icon-accent-secondary: var(--color-brand-secondary-400); --icon-accent-secondary-subtle: var(--color-brand-secondary-500); --icon-accent-secondary-subtler: var(--color-brand-secondary-600); --icon-accent-secondary-subtlest: var(--color-brand-secondary-700); --elevation-shadow-core: var(--color-neutral-900-a10); --elevation-shadow-emphasize-cast: var(--color-neutral-900-a20); --elevation-shadow-strong-cast: var(--color-neutral-900-a35); --elevation-shadow-heavy-cast: var(--color-neutral-900-a60); --elevation-light-core: var(--color-brand-primary-400-a10); --elevation-light-emphasize-cast: var(--color-brand-primary-500-a10); --elevation-light-strong-cast: var(--color-brand-primary-500-a20); --elevation-light-heavy-cast: var(--color-brand-primary-500-a40); } :root { --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1376px; --text-heading-2xs: 0.75rem; --text-heading-2xs--font-weight: 600; --text-heading-2xs--line-height: 1.334; --text-heading-xs: 0.875rem; --text-heading-xs--font-weight: 600; --text-heading-xs--line-height: 1.429; --text-heading-sm: 1rem; --text-heading-sm--font-weight: 700; --text-heading-sm--line-height: 1.5; --text-heading-md: 1.25rem; --text-heading-md--font-weight: 700; --text-heading-md--line-height: 1.4; --text-heading-lg: 1.5rem; --text-heading-lg--font-weight: 700; --text-heading-lg--line-height: 1.334; --text-heading-xl: 1.75rem; --text-heading-xl--font-weight: 700; --text-heading-xl--line-height: 1.358; --text-heading-2xl: 2.25rem; --text-heading-2xl--font-weight: 700; --text-heading-2xl--line-height: 1.334; --text-heading-3xl: 2.5rem; --text-heading-3xl--font-weight: 700; --text-heading-3xl--line-height: 1.3; --text-heading-4xl: 3rem; --text-heading-4xl--font-weight: 700; --text-heading-4xl--line-height: 1.292; --text-heading-5xl: 4rem; --text-heading-5xl--font-weight: 700; --text-heading-5xl--line-height: 1.25; --text-body-regular-lg: 1rem; --text-body-regular-lg--font-weight: 400; --text-body-regular-lg--line-height: 1.5; --text-body-medium-lg: 1rem; --text-body-medium-lg--font-weight: 500; --text-body-medium-lg--line-height: 1.5; --text-body-regular-md: 0.875rem; --text-body-regular-md--font-weight: 400; --text-body-regular-md--line-height: 1.429; --text-body-medium-md: 0.875rem; --text-body-medium-md--font-weight: 500; --text-body-medium-md--line-height: 1.429; --text-body-regular-sm: 0.75rem; --text-body-regular-sm--font-weight: 400; --text-body-regular-sm--line-height: 1.334; --text-body-medium-sm: 0.75rem; --text-body-medium-sm--font-weight: 500; --text-body-medium-sm--line-height: 1.334; --radius-sm: 0.125rem; --radius-md: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-3xl: 2rem; --radius-circle: 50%; --border-width-sm: 0.0625rem; --border-width-md: 0.125rem; --border-width-lg: 0.25rem; --shadow-normal: 0 4px 8px 0 var(--color-elevation-shadow-core); --shadow-emphasize: 0 4px 8px 0 var(--color-elevation-shadow-core), 0 4px 12px 0 var(--color-elevation-shadow-emphasize-cast); --shadow-strong: 0 8px 12px 0 var(--color-elevation-shadow-core), 0 8px 24px 0 var(--color-elevation-shadow-strong-cast); --shadow-heavy: 0 12px 28px 0 var(--color-elevation-shadow-core), 0 12px 100px 0 var(--color-elevation-shadow-heavy-cast); --shadow-light-strong: 0 4px 12px 0 var(--color-elevation-shadow-core), 0 4px 32px 0 var(--color-elevation-light-strong-cast); --shadow-light-heavy: 0 12px 28px 0 var(--color-elevation-light-core), 0 12px 100px 0 var(--color-elevation-light-heavy-cast); --default-transition-duration: 150ms; --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } :root { --color-black: #000; --color-white: #fff; }