/* Space DS · generado desde Figma con scripts/build-tokens.mjs. No editar a mano. */

@theme {
  --color-surface-50: #ffffff;
  --color-surface-100: #f7f9fd;
  --color-surface-200: #ecedee;
  --color-surface-300: #cbcfd2;
  --color-surface-400: #a7aeb4;
  --color-surface-500: #8e979f;
  --color-surface-600: #6b767f;
  --color-surface-700: #4f575e;
  --color-surface-800: #33383d;
  --color-surface-900: #202327;
  --color-primary-50: #f8f5ff;
  --color-primary-100: #e3d7ff;
  --color-primary-200: #cebafe;
  --color-primary-300: #b99cfc;
  --color-primary-400: #9b76fa;
  --color-primary-500: #7d49f8;
  --color-primary-600: #6528f7;
  --color-primary-700: #501bce;
  --color-primary-800: #4017a8;
  --color-primary-900: #350192;
  --color-secondary-50: #e8f1fc;
  --color-secondary-100: #c1daf8;
  --color-secondary-200: #9cc2f4;
  --color-secondary-300: #77a9ee;
  --color-secondary-400: #4c8ce7;
  --color-secondary-500: #1b6ddf;
  --color-secondary-600: #175ec1;
  --color-secondary-700: #1450a3;
  --color-secondary-800: #114388;
  --color-secondary-900: #0e376f;
  --color-success-50: #f6fefb;
  --color-success-100: #caf1e2;
  --color-success-200: #9de3c8;
  --color-success-300: #6bd4ac;
  --color-success-400: #1bc590;
  --color-success-500: #16a377;
  --color-success-600: #12825f;
  --color-success-700: #0e674b;
  --color-success-800: #0a4834;
  --color-success-900: #073929;
  --color-warning-50: #fffdfa;
  --color-warning-100: #fcecd7;
  --color-warning-200: #f9dbb5;
  --color-warning-300: #f6c487;
  --color-warning-400: #f2ab53;
  --color-warning-500: #ee9322;
  --color-warning-600: #c97a18;
  --color-warning-700: #a6620d;
  --color-warning-800: #8c5414;
  --color-warning-900: #7b4706;
  --color-danger-50: #fbeaea;
  --color-danger-100: #f8cbcb;
  --color-danger-200: #f2acab;
  --color-danger-300: #ea8c8b;
  --color-danger-400: #e16b6b;
  --color-danger-500: #c92929;
  --color-danger-600: #a92323;
  --color-danger-700: #8b1d1d;
  --color-danger-800: #6e1717;
  --color-danger-900: #581111;
  --color-neutral-dark-50: #8e9398;
  --color-neutral-dark-100: #74787d;
  --color-neutral-dark-200: #5a5e63;
  --color-neutral-dark-300: #44484d;
  --color-neutral-dark-400: #35383d;
  --color-neutral-dark-500: #282c30;
  --color-neutral-dark-600: #1e2226;
  --color-neutral-dark-700: #181b1f;
  --color-neutral-dark-800: #111418;
  --color-neutral-dark-900: #0a0e12;
  --color-alpha-primary-10: #7d49f81a;
  --color-alpha-primary-20: #7d49f833;
  --color-alpha-secondary-10: #1b6ddf1a;
  --color-alpha-secondary-20: #1b6ddf33;
  --color-alpha-success-10: #16a3771a;
  --color-alpha-success-20: #16a37733;
  --color-alpha-warning-10: #ee93221a;
  --color-alpha-warning-20: #ee932233;
  --color-alpha-danger-10: #c929291a;
  --color-alpha-danger-20: #c9292933;
  --color-alpha-black-5: #0a0e120d;
  --color-alpha-black-10: #0a0e121a;
  --color-alpha-black-60: #0a0e1299;
  --color-alpha-black-80: #0a0e12cc;
  --color-alpha-white-5: #ffffff0d;
  --color-alpha-white-10: #ffffff1a;
  --color-alpha-white-20: #ffffff33;
  --color-alpha-black-25: #0a0e1240;
  --color-alpha-black-40: #0a0e1266;
  --color-alpha-primary-30: #7d49f84d;
  --color-alpha-secondary-30: #1b6ddf4d;
  --color-alpha-success-30: #16a3774d;
  --color-alpha-warning-30: #ee93224d;
  --color-alpha-danger-30: #c929294d;
  --color-bg-canvas: var(--color-surface-100);
  --color-bg-surface: var(--color-surface-50);
  --color-bg-surface-raised: var(--color-surface-50);
  --color-bg-surface-sunken: var(--color-surface-200);
  --color-bg-inverse: var(--color-surface-900);
  --color-bg-overlay: var(--color-alpha-black-60);
  --color-bg-brand-subtle: var(--color-primary-50);
  --color-bg-info-subtle: var(--color-secondary-50);
  --color-bg-success-subtle: var(--color-success-50);
  --color-bg-warning-subtle: var(--color-warning-50);
  --color-bg-danger-subtle: var(--color-danger-50);
  --color-text-primary: var(--color-surface-900);
  --color-text-secondary: var(--color-surface-700);
  --color-text-tertiary: var(--color-surface-600);
  --color-text-disabled: var(--color-surface-500);
  --color-text-inverse: var(--color-surface-50);
  --color-text-on-action: var(--color-surface-50);
  --color-text-on-warning: var(--color-surface-900);
  --color-text-brand: var(--color-primary-600);
  --color-text-link: var(--color-secondary-600);
  --color-text-success: var(--color-success-700);
  --color-text-warning: var(--color-warning-800);
  --color-text-danger: var(--color-danger-600);
  --color-icon-primary: var(--color-surface-900);
  --color-icon-secondary: var(--color-surface-600);
  --color-icon-disabled: var(--color-surface-500);
  --color-icon-inverse: var(--color-surface-50);
  --color-icon-on-action: var(--color-surface-50);
  --color-icon-brand: var(--color-primary-500);
  --color-icon-info: var(--color-secondary-500);
  --color-icon-success: var(--color-success-600);
  --color-icon-warning: var(--color-warning-500);
  --color-icon-danger: var(--color-danger-500);
  --color-border-default: var(--color-surface-300);
  --color-border-subtle: var(--color-surface-200);
  --color-border-strong: var(--color-surface-500);
  --color-border-focus: var(--color-primary-500);
  --color-border-disabled: var(--color-surface-300);
  --color-border-brand: var(--color-primary-500);
  --color-border-success: var(--color-success-600);
  --color-border-warning: var(--color-warning-500);
  --color-border-danger: var(--color-danger-500);
  --color-action-primary-default: var(--color-primary-500);
  --color-action-primary-hover: var(--color-primary-600);
  --color-action-primary-pressed: var(--color-primary-700);
  --color-action-primary-subtle: var(--color-primary-50);
  --color-action-neutral-default: var(--color-surface-50);
  --color-action-neutral-hover: var(--color-surface-100);
  --color-action-neutral-pressed: var(--color-surface-200);
  --color-action-danger-default: var(--color-danger-500);
  --color-action-danger-hover: var(--color-danger-600);
  --color-action-danger-pressed: var(--color-danger-700);
  --color-action-success-default: var(--color-success-600);
  --color-action-success-hover: var(--color-success-700);
  --color-action-success-pressed: var(--color-success-800);
  --color-action-warning-default: var(--color-warning-400);
  --color-action-warning-hover: var(--color-warning-500);
  --color-action-warning-pressed: var(--color-warning-600);
  --color-action-disabled: var(--color-surface-200);
  --color-shadow-subtle: var(--color-alpha-black-5);
  --color-shadow-default: var(--color-alpha-black-10);
  --color-shadow-strong: var(--color-alpha-black-25);
  --color-bg-contrast: var(--color-surface-900);
  --color-text-on-contrast: var(--color-surface-50);
  --color-text-on-contrast-secondary: var(--color-surface-300);
  --color-icon-on-contrast: var(--color-surface-50);
  --color-action-primary-subtle-hover: var(--color-primary-100);
  --color-action-primary-subtle-pressed: var(--color-primary-200);
  --color-action-danger-subtle: var(--color-danger-50);
  --color-action-danger-subtle-hover: var(--color-danger-100);
  --color-action-danger-subtle-pressed: var(--color-danger-200);
  --color-action-success-subtle: var(--color-success-50);
  --color-action-success-subtle-hover: var(--color-success-100);
  --color-action-success-subtle-pressed: var(--color-success-200);
  --color-action-warning-subtle: var(--color-warning-50);
  --color-action-warning-subtle-hover: var(--color-warning-100);
  --color-action-warning-subtle-pressed: var(--color-warning-200);
  --color-action-neutral-subtle: var(--color-surface-200);
  --color-action-neutral-subtle-hover: var(--color-surface-300);
  --color-action-neutral-subtle-pressed: var(--color-surface-400);
  --color-action-inverse-default: var(--color-surface-900);
  --color-action-inverse-hover: var(--color-surface-800);
  --color-action-inverse-pressed: var(--color-surface-700);
  --color-action-info-default: #1b6ddf;
  --radius-none: 0;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --radius-full: 9999px;
  --radius-control: var(--radius-lg);
  --radius-badge: var(--radius-sm);
  --radius-card: var(--radius-xl);
  --radius-overlay: var(--radius-lg);
  --radius-dialog: var(--radius-2xl);
  --radius-pill: var(--radius-full);
  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --blur-3xl: 64px;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
  --font-space-ds: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: var(--font-space-ds);
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-snug: 1.35;
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  --text-display: 8rem;
  --text-display--line-height: 1.2;
  --text-display--letter-spacing: -0.025em;
  --text-heading-xxl: 6rem;
  --text-heading-xxl--line-height: 1.2;
  --text-heading-xxl--letter-spacing: -0.025em;
  --text-heading-xl: 4.5rem;
  --text-heading-xl--line-height: 1.2;
  --text-heading-xl--letter-spacing: -0.025em;
  --text-heading-lg: 3.75rem;
  --text-heading-lg--line-height: 1.2;
  --text-heading-lg--letter-spacing: -0.025em;
  --text-heading-md: 3rem;
  --text-heading-md--line-height: 1.2;
  --text-heading-md--letter-spacing: -0.025em;
  --text-heading-sm: 2.25rem;
  --text-heading-sm--line-height: 1.2;
  --text-heading-xs: 1.875rem;
  --text-heading-xs--line-height: 1.35;
  --text-title-md: 1.5rem;
  --text-title-md--line-height: 1.35;
  --text-title-sm: 1.25rem;
  --text-title-sm--line-height: 1.35;
  --text-body-xl: 1.125rem;
  --text-body-xl--line-height: 1.5;
  --text-body-lg: 1rem;
  --text-body-lg--line-height: 1.5;
  --text-body-md: 0.875rem;
  --text-body-md--line-height: 1.5;
  --text-body-sm: 0.75rem;
  --text-body-sm--line-height: 1.5;
  --text-caption: 0.625rem;
  --text-caption--line-height: 1.5;
  --text-caption--letter-spacing: 0.025em;
  --shadow-elevation-raised: 0px 1px 3px 0px var(--color-shadow-default), 0px 1px 2px -1px var(--color-shadow-default);
  --shadow-elevation-sticky: 0px 4px 6px -1px var(--color-shadow-default), 0px 2px 4px -2px var(--color-shadow-default);
  --shadow-elevation-overlay: 0px 10px 15px -3px var(--color-shadow-default), 0px 4px 6px -4px var(--color-shadow-default);
  --shadow-elevation-dialog: 0px 20px 25px -5px var(--color-shadow-default), 0px 8px 10px -6px var(--color-shadow-default);
  --shadow-2xs: 0px 1px 0px 0px var(--color-shadow-subtle);
  --shadow-xs: 0px 1px 2px 0px var(--color-shadow-subtle);
  --shadow-sm: 0px 1px 3px 0px var(--color-shadow-default), 0px 1px 2px -1px var(--color-shadow-default);
  --shadow-md: 0px 4px 6px -1px var(--color-shadow-default), 0px 2px 4px -2px var(--color-shadow-default);
  --shadow-lg: 0px 10px 15px -3px var(--color-shadow-default), 0px 4px 6px -4px var(--color-shadow-default);
  --shadow-xl: 0px 20px 25px -5px var(--color-shadow-default), 0px 8px 10px -6px var(--color-shadow-default);
  --shadow-2xl: 0px 25px 50px -12px var(--color-shadow-strong);
  --shadow-inset-xs: inset 0px 1px 1px 0px var(--color-shadow-subtle);
  --shadow-focus-ring: 0px 0px 0px 2px var(--color-bg-surface), 0px 0px 0px 4px var(--color-border-focus);
}

@theme inline {
  --spacing-icon-xs: var(--size-icon-xs);
  --spacing-icon-sm: var(--size-icon-sm);
  --spacing-icon-md: var(--size-icon-md);
  --spacing-icon-lg: var(--size-icon-lg);
  --spacing-icon-xl: var(--size-icon-xl);
  --spacing-control-sm: var(--size-control-sm);
  --spacing-control-md: var(--size-control-md);
  --spacing-control-lg: var(--size-control-lg);
  --spacing-touch-target: var(--size-touch-target);
  --spacing-avatar-sm: var(--size-avatar-sm);
  --spacing-avatar-md: var(--size-avatar-md);
  --spacing-avatar-lg: var(--size-avatar-lg);
  --spacing-avatar-xl: var(--size-avatar-xl);
  --spacing-chip-sm: var(--size-chip-sm);
  --spacing-chip-md: var(--size-chip-md);
}

:root {
  --space-0: 0;
  --space-0_5: 0.125rem;
  --space-1: 0.25rem;
  --space-1_5: 0.375rem;
  --space-2: 0.5rem;
  --space-2_5: 0.625rem;
  --space-3: 0.75rem;
  --space-3_5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-36: 9rem;
  --space-40: 10rem;
  --space-44: 11rem;
  --space-48: 12rem;
  --space-52: 13rem;
  --space-56: 14rem;
  --space-60: 15rem;
  --space-64: 16rem;
  --space-72: 18rem;
  --space-80: 20rem;
  --space-96: 24rem;
  --size-icon-xs: var(--space-3);
  --size-icon-sm: var(--space-4);
  --size-icon-md: var(--space-5);
  --size-icon-lg: var(--space-6);
  --size-icon-xl: var(--space-8);
  --size-control-sm: var(--space-8);
  --size-control-md: var(--space-10);
  --size-control-lg: var(--space-12);
  --size-touch-target: var(--space-11);
  --size-avatar-sm: var(--space-6);
  --size-avatar-md: var(--space-8);
  --size-avatar-lg: var(--space-10);
  --size-avatar-xl: var(--space-14);
  --size-chip-sm: var(--space-6);
  --size-chip-md: var(--space-8);
  --border-width-0: 0px;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --focus-ring-width: var(--border-width-2);
  --focus-ring-offset: 2px;
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;
  --opacity-disabled: var(--opacity-40);
  --opacity-hover-overlay: var(--opacity-10);
  --duration-instant: 75ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1300;
  --z-modal: 1400;
  --z-popover: 1500;
  --z-toast: 1600;
  --z-tooltip: 1700;
  --grid-columns: 4;
  --grid-gutter: var(--space-4);
  --grid-margin: var(--space-4);
  --container-max-width: 22.5rem;
  --card-min-width: 9.75rem;
  --section-gap: var(--space-12);
  --stack-gap: var(--space-4);
}

[data-theme="light"] {
  --color-bg-canvas: var(--color-surface-100);
  --color-bg-surface: var(--color-surface-50);
  --color-bg-surface-raised: var(--color-surface-50);
  --color-bg-surface-sunken: var(--color-surface-200);
  --color-bg-inverse: var(--color-surface-900);
  --color-bg-overlay: var(--color-alpha-black-60);
  --color-bg-brand-subtle: var(--color-primary-50);
  --color-bg-info-subtle: var(--color-secondary-50);
  --color-bg-success-subtle: var(--color-success-50);
  --color-bg-warning-subtle: var(--color-warning-50);
  --color-bg-danger-subtle: var(--color-danger-50);
  --color-text-primary: var(--color-surface-900);
  --color-text-secondary: var(--color-surface-700);
  --color-text-tertiary: var(--color-surface-600);
  --color-text-disabled: var(--color-surface-500);
  --color-text-inverse: var(--color-surface-50);
  --color-text-brand: var(--color-primary-600);
  --color-text-link: var(--color-secondary-600);
  --color-text-success: var(--color-success-700);
  --color-text-warning: var(--color-warning-800);
  --color-text-danger: var(--color-danger-600);
  --color-icon-primary: var(--color-surface-900);
  --color-icon-secondary: var(--color-surface-600);
  --color-icon-disabled: var(--color-surface-500);
  --color-icon-inverse: var(--color-surface-50);
  --color-icon-brand: var(--color-primary-500);
  --color-icon-info: var(--color-secondary-500);
  --color-icon-success: var(--color-success-600);
  --color-icon-warning: var(--color-warning-500);
  --color-icon-danger: var(--color-danger-500);
  --color-border-default: var(--color-surface-300);
  --color-border-subtle: var(--color-surface-200);
  --color-border-strong: var(--color-surface-500);
  --color-border-focus: var(--color-primary-500);
  --color-border-disabled: var(--color-surface-300);
  --color-border-brand: var(--color-primary-500);
  --color-border-success: var(--color-success-600);
  --color-border-warning: var(--color-warning-500);
  --color-border-danger: var(--color-danger-500);
  --color-action-primary-subtle: var(--color-primary-50);
  --color-action-neutral-default: var(--color-surface-50);
  --color-action-neutral-hover: var(--color-surface-100);
  --color-action-neutral-pressed: var(--color-surface-200);
  --color-action-warning-hover: var(--color-warning-500);
  --color-action-warning-pressed: var(--color-warning-600);
  --color-action-disabled: var(--color-surface-200);
  --color-shadow-subtle: var(--color-alpha-black-5);
  --color-shadow-default: var(--color-alpha-black-10);
  --color-shadow-strong: var(--color-alpha-black-25);
  --color-bg-contrast: var(--color-surface-900);
  --color-action-primary-subtle-hover: var(--color-primary-100);
  --color-action-primary-subtle-pressed: var(--color-primary-200);
  --color-action-danger-subtle: var(--color-danger-50);
  --color-action-danger-subtle-hover: var(--color-danger-100);
  --color-action-danger-subtle-pressed: var(--color-danger-200);
  --color-action-success-subtle: var(--color-success-50);
  --color-action-success-subtle-hover: var(--color-success-100);
  --color-action-success-subtle-pressed: var(--color-success-200);
  --color-action-warning-subtle: var(--color-warning-50);
  --color-action-warning-subtle-hover: var(--color-warning-100);
  --color-action-warning-subtle-pressed: var(--color-warning-200);
  --color-action-neutral-subtle: var(--color-surface-200);
  --color-action-neutral-subtle-hover: var(--color-surface-300);
  --color-action-neutral-subtle-pressed: var(--color-surface-400);
  --color-action-inverse-default: var(--color-surface-900);
  --color-action-inverse-hover: var(--color-surface-800);
  --color-action-inverse-pressed: var(--color-surface-700);
}

[data-theme="dark"] {
  --color-bg-canvas: var(--color-neutral-dark-800);
  --color-bg-surface: var(--color-neutral-dark-700);
  --color-bg-surface-raised: var(--color-neutral-dark-600);
  --color-bg-surface-sunken: var(--color-neutral-dark-900);
  --color-bg-inverse: var(--color-surface-50);
  --color-bg-overlay: var(--color-alpha-black-80);
  --color-bg-brand-subtle: var(--color-alpha-primary-20);
  --color-bg-info-subtle: var(--color-alpha-secondary-20);
  --color-bg-success-subtle: var(--color-alpha-success-20);
  --color-bg-warning-subtle: var(--color-alpha-warning-20);
  --color-bg-danger-subtle: var(--color-alpha-danger-20);
  --color-text-primary: var(--color-surface-50);
  --color-text-secondary: var(--color-surface-300);
  --color-text-tertiary: var(--color-surface-400);
  --color-text-disabled: var(--color-neutral-dark-100);
  --color-text-inverse: var(--color-surface-900);
  --color-text-brand: var(--color-primary-300);
  --color-text-link: var(--color-secondary-300);
  --color-text-success: var(--color-success-400);
  --color-text-warning: var(--color-warning-400);
  --color-text-danger: var(--color-danger-400);
  --color-icon-primary: var(--color-surface-50);
  --color-icon-secondary: var(--color-surface-400);
  --color-icon-disabled: var(--color-neutral-dark-100);
  --color-icon-inverse: var(--color-surface-900);
  --color-icon-brand: var(--color-primary-300);
  --color-icon-info: var(--color-secondary-300);
  --color-icon-success: var(--color-success-400);
  --color-icon-warning: var(--color-warning-400);
  --color-icon-danger: var(--color-danger-400);
  --color-border-default: var(--color-neutral-dark-400);
  --color-border-subtle: var(--color-neutral-dark-500);
  --color-border-strong: var(--color-neutral-dark-200);
  --color-border-focus: var(--color-primary-300);
  --color-border-disabled: var(--color-neutral-dark-500);
  --color-border-brand: var(--color-primary-400);
  --color-border-success: var(--color-success-400);
  --color-border-warning: var(--color-warning-400);
  --color-border-danger: var(--color-danger-400);
  --color-action-primary-subtle: var(--color-alpha-primary-10);
  --color-action-neutral-default: var(--color-neutral-dark-700);
  --color-action-neutral-hover: var(--color-neutral-dark-600);
  --color-action-neutral-pressed: var(--color-neutral-dark-500);
  --color-action-warning-hover: var(--color-warning-300);
  --color-action-warning-pressed: var(--color-warning-500);
  --color-action-disabled: var(--color-neutral-dark-500);
  --color-shadow-subtle: var(--color-alpha-black-40);
  --color-shadow-default: var(--color-alpha-black-60);
  --color-shadow-strong: var(--color-alpha-black-80);
  --color-bg-contrast: var(--color-neutral-dark-900);
  --color-action-primary-subtle-hover: var(--color-alpha-primary-20);
  --color-action-primary-subtle-pressed: var(--color-alpha-primary-30);
  --color-action-danger-subtle: var(--color-alpha-danger-10);
  --color-action-danger-subtle-hover: var(--color-alpha-danger-20);
  --color-action-danger-subtle-pressed: var(--color-alpha-danger-30);
  --color-action-success-subtle: var(--color-alpha-success-10);
  --color-action-success-subtle-hover: var(--color-alpha-success-20);
  --color-action-success-subtle-pressed: var(--color-alpha-success-30);
  --color-action-warning-subtle: var(--color-alpha-warning-10);
  --color-action-warning-subtle-hover: var(--color-alpha-warning-20);
  --color-action-warning-subtle-pressed: var(--color-alpha-warning-30);
  --color-action-neutral-subtle: var(--color-neutral-dark-600);
  --color-action-neutral-subtle-hover: var(--color-neutral-dark-500);
  --color-action-neutral-subtle-pressed: var(--color-neutral-dark-400);
  --color-action-inverse-default: var(--color-surface-50);
  --color-action-inverse-hover: var(--color-surface-200);
  --color-action-inverse-pressed: var(--color-surface-300);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-canvas: var(--color-neutral-dark-800);
    --color-bg-surface: var(--color-neutral-dark-700);
    --color-bg-surface-raised: var(--color-neutral-dark-600);
    --color-bg-surface-sunken: var(--color-neutral-dark-900);
    --color-bg-inverse: var(--color-surface-50);
    --color-bg-overlay: var(--color-alpha-black-80);
    --color-bg-brand-subtle: var(--color-alpha-primary-20);
    --color-bg-info-subtle: var(--color-alpha-secondary-20);
    --color-bg-success-subtle: var(--color-alpha-success-20);
    --color-bg-warning-subtle: var(--color-alpha-warning-20);
    --color-bg-danger-subtle: var(--color-alpha-danger-20);
    --color-text-primary: var(--color-surface-50);
    --color-text-secondary: var(--color-surface-300);
    --color-text-tertiary: var(--color-surface-400);
    --color-text-disabled: var(--color-neutral-dark-100);
    --color-text-inverse: var(--color-surface-900);
    --color-text-brand: var(--color-primary-300);
    --color-text-link: var(--color-secondary-300);
    --color-text-success: var(--color-success-400);
    --color-text-warning: var(--color-warning-400);
    --color-text-danger: var(--color-danger-400);
    --color-icon-primary: var(--color-surface-50);
    --color-icon-secondary: var(--color-surface-400);
    --color-icon-disabled: var(--color-neutral-dark-100);
    --color-icon-inverse: var(--color-surface-900);
    --color-icon-brand: var(--color-primary-300);
    --color-icon-info: var(--color-secondary-300);
    --color-icon-success: var(--color-success-400);
    --color-icon-warning: var(--color-warning-400);
    --color-icon-danger: var(--color-danger-400);
    --color-border-default: var(--color-neutral-dark-400);
    --color-border-subtle: var(--color-neutral-dark-500);
    --color-border-strong: var(--color-neutral-dark-200);
    --color-border-focus: var(--color-primary-300);
    --color-border-disabled: var(--color-neutral-dark-500);
    --color-border-brand: var(--color-primary-400);
    --color-border-success: var(--color-success-400);
    --color-border-warning: var(--color-warning-400);
    --color-border-danger: var(--color-danger-400);
    --color-action-primary-subtle: var(--color-alpha-primary-10);
    --color-action-neutral-default: var(--color-neutral-dark-700);
    --color-action-neutral-hover: var(--color-neutral-dark-600);
    --color-action-neutral-pressed: var(--color-neutral-dark-500);
    --color-action-warning-hover: var(--color-warning-300);
    --color-action-warning-pressed: var(--color-warning-500);
    --color-action-disabled: var(--color-neutral-dark-500);
    --color-shadow-subtle: var(--color-alpha-black-40);
    --color-shadow-default: var(--color-alpha-black-60);
    --color-shadow-strong: var(--color-alpha-black-80);
    --color-bg-contrast: var(--color-neutral-dark-900);
    --color-action-primary-subtle-hover: var(--color-alpha-primary-20);
    --color-action-primary-subtle-pressed: var(--color-alpha-primary-30);
    --color-action-danger-subtle: var(--color-alpha-danger-10);
    --color-action-danger-subtle-hover: var(--color-alpha-danger-20);
    --color-action-danger-subtle-pressed: var(--color-alpha-danger-30);
    --color-action-success-subtle: var(--color-alpha-success-10);
    --color-action-success-subtle-hover: var(--color-alpha-success-20);
    --color-action-success-subtle-pressed: var(--color-alpha-success-30);
    --color-action-warning-subtle: var(--color-alpha-warning-10);
    --color-action-warning-subtle-hover: var(--color-alpha-warning-20);
    --color-action-warning-subtle-pressed: var(--color-alpha-warning-30);
    --color-action-neutral-subtle: var(--color-neutral-dark-600);
    --color-action-neutral-subtle-hover: var(--color-neutral-dark-500);
    --color-action-neutral-subtle-pressed: var(--color-neutral-dark-400);
    --color-action-inverse-default: var(--color-surface-50);
    --color-action-inverse-hover: var(--color-surface-200);
    --color-action-inverse-pressed: var(--color-surface-300);
  }
}

@media (min-width: 40rem) {
  :root {
    --container-max-width: var(--breakpoint-sm);
    --card-min-width: 11.25rem;
  }
}

@media (min-width: 48rem) {
  :root {
    --grid-columns: 8;
    --grid-gutter: var(--space-6);
    --grid-margin: var(--space-8);
    --container-max-width: var(--breakpoint-md);
    --card-min-width: 12.5rem;
    --section-gap: var(--space-16);
    --stack-gap: var(--space-6);
  }
}

@media (min-width: 64rem) {
  :root {
    --grid-columns: 12;
    --grid-margin: var(--space-10);
    --container-max-width: var(--breakpoint-lg);
    --card-min-width: 13.75rem;
  }
}

@media (min-width: 80rem) {
  :root {
    --grid-margin: var(--space-16);
    --container-max-width: var(--breakpoint-xl);
    --card-min-width: 15rem;
    --section-gap: var(--space-20);
    --stack-gap: var(--space-8);
  }
}

@media (min-width: 96rem) {
  :root {
    --grid-gutter: var(--space-8);
    --grid-margin: var(--space-20);
    --container-max-width: var(--breakpoint-2xl);
    --card-min-width: 16.25rem;
    --section-gap: var(--space-24);
  }
}