:root { --radius-none: 0px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.1); --shadow-lg: 0 3px 5px rgba(0, 0, 0, 0.08); --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.15); --shadow-2xl: 0 8px 32px rgba(0, 0, 0, 0.12); --shadow-focus: 0 0 0 1px var(--color-accent); --shadow-glow: 0 2px 6px var(--color-info-glow); --shadow-card: var(--shadow-sm); --shadow-dropdown: var(--shadow-md); --shadow-modal: var(--shadow-lg); --shadow-toast: var(--shadow-xl); --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-dark-lg: 0 4px 24px rgba(0, 0, 0, 0.4); --shadow-side: 2px 0 8px rgba(0, 0, 0, 0.1); --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-dialog: 0 10px 24px rgba(0, 0, 0, 0.25); --shadow-inset-top: 0 -2px 8px rgba(0, 0, 0, 0.1); --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --transition-bounce: 200ms cubic-bezier(0.34, 1.56, 0.64, 1); --border-width-thin: 1px; --border-width-thick: 2px; } [data-theme="dark"] { --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35); --shadow-lg: 0 3px 5px rgba(0, 0, 0, 0.3); --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-2xl: 0 8px 32px rgba(0, 0, 0, 0.35); --shadow-card: var(--shadow-sm); --shadow-dropdown: var(--shadow-md); --shadow-modal: var(--shadow-lg); --shadow-toast: var(--shadow-xl); --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-dark-lg: 0 4px 24px rgba(0, 0, 0, 0.6); --shadow-side: 2px 0 8px rgba(0, 0, 0, 0.3); --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-dialog: 0 10px 24px rgba(0, 0, 0, 0.45); --shadow-inset-top: 0 -2px 8px rgba(0, 0, 0, 0.3); }