/**
 * Variables CSS - Madrid Crece
 * Estilos globales extraídos de Figma
 * 
 * Estas variables se pueden importar desde Figma o configurar manualmente
 */

:root {
	/* Colores Base */
	--mc-color-primary: #2271b1;
	--mc-color-secondary: #135e96;
	--mc-color-accent: #72aee6;
	--mc-color-text: #1d2327;
	--mc-color-text-light: #50575e;
	--mc-color-background: #ffffff;
	--mc-color-background-alt: #f6f7f7;
	--mc-color-border: #c3c4c7;
	--mc-color-success: #00a32a;
	--mc-color-warning: #dba617;
	--mc-color-error: #d63638;
	--mc-color-info: #2271b1;

	/* Tipografía - Familias */
	--mc-font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--mc-font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--mc-font-mono: "Courier New", Courier, monospace;

	/* Tipografía - Tamaños */
	--mc-font-size-xs: 0.75rem;    /* 12px */
	--mc-font-size-sm: 0.875rem;   /* 14px */
	--mc-font-size-base: 1rem;     /* 16px */
	--mc-font-size-lg: 1.125rem;   /* 18px */
	--mc-font-size-xl: 1.25rem;    /* 20px */
	--mc-font-size-2xl: 1.5rem;    /* 24px */
	--mc-font-size-3xl: 1.875rem;  /* 30px */
	--mc-font-size-4xl: 2.25rem;   /* 36px */
	--mc-font-size-5xl: 3rem;      /* 48px */

	/* Tipografía - Pesos */
	--mc-font-weight-light: 300;
	--mc-font-weight-normal: 400;
	--mc-font-weight-medium: 500;
	--mc-font-weight-semibold: 600;
	--mc-font-weight-bold: 700;

	/* Tipografía - Alturas de línea */
	--mc-line-height-tight: 1.25;
	--mc-line-height-normal: 1.5;
	--mc-line-height-relaxed: 1.75;
	--mc-line-height-loose: 2;

	/* Espaciado */
	--mc-spacing-xs: 0.25rem;   /* 4px */
	--mc-spacing-sm: 0.5rem;    /* 8px */
	--mc-spacing-md: 1rem;      /* 16px */
	--mc-spacing-lg: 1.5rem;    /* 24px */
	--mc-spacing-xl: 2rem;      /* 32px */
	--mc-spacing-2xl: 3rem;     /* 48px */
	--mc-spacing-3xl: 4rem;     /* 64px */

	/* Bordes */
	--mc-border-radius-sm: 0.25rem;  /* 4px */
	--mc-border-radius-md: 0.5rem;   /* 8px */
	--mc-border-radius-lg: 0.75rem;  /* 12px */
	--mc-border-radius-full: 9999px;
	--mc-border-width: 1px;

	/* Sombras */
	--mc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--mc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--mc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--mc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* Breakpoints (para uso en JS/media queries) */
	--mc-breakpoint-sm: 640px;
	--mc-breakpoint-md: 768px;
	--mc-breakpoint-lg: 1024px;
	--mc-breakpoint-xl: 1280px;
	--mc-breakpoint-2xl: 1536px;

	/* Transiciones */
	--mc-transition-fast: 150ms;
	--mc-transition-base: 300ms;
	--mc-transition-slow: 500ms;
	--mc-transition-ease: ease-in-out;
}

/* Variables específicas de GeneratePress */
:root {
	/* Colores globales de GeneratePress - sobrescritos con variables */
	--gp-color-primary: var(--mc-color-primary);
	--gp-color-secondary: var(--mc-color-secondary);
	--gp-color-text: var(--mc-color-text);
	--gp-color-background: var(--mc-color-background);
}