:root {
  --font-primary: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-secondary-alt: 'Sora', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semiBold: 600;
  --fw-bold: 700;
  --fw-extraBold: 800;
  --palette-primary-lighter: #FFE5D0;
  --palette-primary-light: #FFB174;
  --palette-primary-main: #FF7B16;
  --palette-primary-dark: #C75A00;
  --palette-primary-darker: #8A3D00;
  --palette-primary-contrastText: #FFFFFF;
  --palette-secondary-lighter: #D6E2F5;
  --palette-secondary-light: #6E97D6;
  --palette-secondary-main: #1C4C97;
  --palette-secondary-dark: #123163;
  --palette-secondary-darker: #0A1C3C;
  --palette-secondary-contrastText: #FFFFFF;
  --palette-info-lighter: #CAFDF5;
  --palette-info-light: #61F3F3;
  --palette-info-main: #00B8D9;
  --palette-info-dark: #006C9C;
  --palette-info-darker: #003768;
  --palette-info-contrastText: #FFFFFF;
  --palette-success-lighter: #D3FCD2;
  --palette-success-light: #77ED8B;
  --palette-success-main: #22C55E;
  --palette-success-dark: #118D57;
  --palette-success-darker: #065E49;
  --palette-success-contrastText: #FFFFFF;
  --palette-warning-lighter: #FFF5CC;
  --palette-warning-light: #FFD666;
  --palette-warning-main: #FFAB00;
  --palette-warning-dark: #B76E00;
  --palette-warning-darker: #7A4100;
  --palette-warning-contrastText: #1C252E;
  --palette-error-lighter: #FFE9D5;
  --palette-error-light: #FFAC82;
  --palette-error-main: #FF5630;
  --palette-error-dark: #B71D18;
  --palette-error-darker: #7A0916;
  --palette-error-contrastText: #FFFFFF;
  --grey-50: #FAFAFA;
  --grey-100: #F5F5F6;
  --grey-200: #EEEEF0;
  --grey-300: #E0E0E3;
  --grey-400: #C4C4C9;
  --grey-500: #9A9AA1;
  --grey-600: #6A6A6A;
  --grey-700: #4D4D4D;
  --grey-800: #272727;
  --grey-900: #1A1A1A;
  --common-black: #000000;
  --common-white: #FFFFFF;
  --text-primary: #272727;
  --text-secondary: #6A6A6A;
  --text-disabled: #9A9AA1;
  --bg-default: #FFFFFF;
  --bg-paper: #FFFFFF;
  --bg-neutral: #F5F5F6;
  --divider: rgb(154 154 161 / 0.20);
  --shadow-color: 154 154 161;
  --action-hover: rgb(154 154 161 / 0.08);
  --action-selected: rgb(154 154 161 / 0.16);
  --action-focus: rgb(154 154 161 / 0.24);
  --action-disabled: rgb(154 154 161 / 0.80);
  --action-disabledBackground: rgb(154 154 161 / 0.24);
  --space-0_5: 4px;
  --space-1: 8px;
  --space-1_5: 12px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-15: 120px;
  --section-y-movil: 64px;
  --section-y-desktop: 96px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --container-max: 1200px;
  --container-gutter: 24px;
  --shadow-z1: 0 1px 2px 0 rgb(var(--shadow-color) / 0.16);
  --shadow-z4: 0 4px 8px 0 rgb(var(--shadow-color) / 0.16);
  --shadow-z8: 0 8px 16px 0 rgb(var(--shadow-color) / 0.16);
  --shadow-z12: 0 12px 24px -4px rgb(var(--shadow-color) / 0.16);
  --shadow-z16: 0 16px 32px -4px rgb(var(--shadow-color) / 0.16);
  --shadow-z20: 0 20px 40px -4px rgb(var(--shadow-color) / 0.16);
  --shadow-z24: 0 24px 48px 0 rgb(var(--shadow-color) / 0.16);
  --shadow-card: 0 0 2px 0 rgb(var(--shadow-color) / 0.20), 0 12px 24px -4px rgb(var(--shadow-color) / 0.12);
  --shadow-dropdown: 0 0 2px 0 rgb(var(--shadow-color) / 0.24), -20px 20px 40px -4px rgb(var(--shadow-color) / 0.24);
  --shadow-dialog: -40px 40px 80px -8px rgb(0 0 0 / 0.24);
  --shadow-primary: 0 8px 16px 0 color-mix(in srgb, var(--palette-primary-main) 24%, transparent);
  --shadow-secondary: 0 8px 16px 0 color-mix(in srgb, var(--palette-secondary-main) 24%, transparent);
  --shadow-info: 0 8px 16px 0 color-mix(in srgb, var(--palette-info-main) 24%, transparent);
  --shadow-success: 0 8px 16px 0 color-mix(in srgb, var(--palette-success-main) 24%, transparent);
  --shadow-warning: 0 8px 16px 0 color-mix(in srgb, var(--palette-warning-main) 24%, transparent);
  --shadow-error: 0 8px 16px 0 color-mix(in srgb, var(--palette-error-main) 24%, transparent);
}

/* esquema oscuro: aplicar [data-scheme="dark"] en <html> o un contenedor */
[data-scheme="dark"] {
  --text-primary: #FFFFFF;
  --text-secondary: #9A9AA1;
  --text-disabled: #6A6A6A;
  --bg-default: #1A1A1A;
  --bg-paper: #272727;
  --bg-neutral: #2E2E2E;
  --divider: rgb(154 154 161 / 0.20);
  --shadow-color: 0 0 0;
}