/**
 * Variables CSS exportadas desde el sitio Next.js (Flyware Labs)
 * Paleta, tema light/dark y tokens (espacio, radius, tipografía, etc.)
 *
 * @package FlywareLabs
 */

/* ========== PALETA ( :root ) ========== */
:root {
	/* blue */
	--color-blue-050: rgb(245, 248, 255);
	--color-blue-100: rgb(220, 230, 255);
	--color-blue-200: rgb(180, 205, 255);
	--color-blue-300: rgb(140, 175, 255);
	--color-blue-400: rgb(90, 140, 255);
	--color-blue-500: rgb(27, 86, 253);
	--color-blue-600: rgb(1, 24, 216);
	--color-blue-700: rgb(0, 18, 160);
	--color-blue-800: rgb(0, 13, 120);
	--color-blue-900: rgb(0, 9, 75);
	/* green */
	--color-green-050: rgb(244, 252, 244);
	--color-green-100: rgb(232, 247, 232);
	--color-green-200: rgb(214, 240, 217);
	--color-green-300: rgb(190, 230, 198);
	--color-green-400: rgb(160, 215, 180);
	--color-green-500: rgb(132, 200, 155);
	--color-green-600: rgb(110, 180, 130);
	--color-green-700: rgb(85, 160, 110);
	--color-green-800: rgb(65, 135, 90);
	--color-green-900: rgb(50, 100, 70);
	/* neutral */
	--color-neutral-000: rgb(255, 255, 255);
	--color-neutral-050: rgb(250, 250, 250);
	--color-neutral-100: rgb(242, 242, 242);
	--color-neutral-200: rgb(225, 225, 225);
	--color-neutral-300: rgb(200, 200, 200);
	--color-neutral-400: rgb(170, 170, 170);
	--color-neutral-500: rgb(140, 140, 140);
	--color-neutral-600: rgb(100, 100, 100);
	--color-neutral-700: rgb(70, 70, 70);
	--color-neutral-800: rgb(45, 45, 45);
	--color-neutral-850: rgb(30, 30, 30);
	--color-neutral-900: rgb(20, 20, 20);
	--color-neutral-950: rgb(10, 10, 10);
	/* yellow */
	--color-yellow-050: rgb(254, 250, 220);
	--color-yellow-100: rgb(252, 242, 195);
	--color-yellow-200: rgb(250, 230, 160);
	--color-yellow-300: rgb(248, 215, 125);
	--color-yellow-400: rgb(240, 200, 90);
	--color-yellow-500: rgb(235, 185, 50);
	--color-yellow-600: rgb(215, 160, 20);
	--color-yellow-700: rgb(185, 135, 15);
	--color-yellow-800: rgb(145, 105, 10);
	--color-yellow-900: rgb(100, 75, 5);
	/* red */
	--color-red-050: rgb(255, 240, 240);
	--color-red-100: rgb(252, 220, 215);
	--color-red-200: rgb(250, 190, 180);
	--color-red-300: rgb(245, 140, 120);
	--color-red-400: rgb(240, 100, 85);
	--color-red-500: rgb(225, 70, 50);
	--color-red-600: rgb(200, 55, 40);
	--color-red-700: rgb(170, 40, 30);
	--color-red-800: rgb(130, 30, 20);
	--color-red-900: rgb(90, 20, 10);
	/* pink */
	--color-pink-050: rgb(253, 242, 248);
	--color-pink-100: rgb(252, 231, 243);
	--color-pink-200: rgb(251, 207, 232);
	--color-pink-300: rgb(249, 168, 212);
	--color-pink-400: rgb(244, 114, 182);
	--color-pink-500: rgb(236, 72, 153);
	--color-pink-600: rgb(219, 39, 119);
	--color-pink-700: rgb(190, 24, 93);
	--color-pink-800: rgb(157, 23, 77);
	--color-pink-900: rgb(131, 24, 67);
	/* orange */
	--color-orange-050: rgb(254, 240, 230);
	--color-orange-100: rgb(250, 220, 195);
	--color-orange-200: rgb(245, 200, 165);
	--color-orange-300: rgb(240, 175, 130);
	--color-orange-400: rgb(235, 150, 100);
	--color-orange-500: rgb(225, 125, 70);
	--color-orange-600: rgb(200, 100, 45);
	--color-orange-700: rgb(170, 80, 30);
	--color-orange-800: rgb(135, 60, 20);
	--color-orange-900: rgb(100, 40, 10);
	/* violet */
	--color-violet-050: rgb(245, 243, 255);
	--color-violet-100: rgb(230, 225, 250);
	--color-violet-200: rgb(210, 205, 245);
	--color-violet-300: rgb(185, 180, 240);
	--color-violet-400: rgb(160, 155, 225);
	--color-violet-500: rgb(130, 130, 200);
	--color-violet-600: rgb(100, 105, 180);
	--color-violet-700: rgb(80, 85, 160);
	--color-violet-800: rgb(60, 65, 130);
	--color-violet-900: rgb(45, 45, 100);
	/* glass white/black */
	--color-glass-white-050: rgba(255, 255, 255, 0.05);
	--color-glass-white-100: rgba(255, 255, 255, 0.05);
	--color-glass-white-200: rgba(255, 255, 255, 0.15);
	--color-glass-white-300: rgba(255, 255, 255, 0.25);
	--color-glass-white-400: rgba(255, 255, 255, 0.35);
	--color-glass-white-500: rgba(255, 255, 255, 0.45);
	--color-glass-white-600: rgba(255, 255, 255, 0.55);
	--color-glass-white-700: rgba(255, 255, 255, 0.65);
	--color-glass-white-800: rgba(255, 255, 255, 0.75);
	--color-glass-white-900: rgba(255, 255, 255, 0.85);
	--color-glass-black-050: rgba(0, 0, 0, 0.05);
	--color-glass-black-100: rgba(0, 0, 0, 0.05);
	--color-glass-black-200: rgba(0, 0, 0, 0.15);
	--color-glass-black-300: rgba(0, 0, 0, 0.25);
	--color-glass-black-400: rgba(0, 0, 0, 0.35);
	--color-glass-black-500: rgba(0, 0, 0, 0.45);
	--color-glass-black-600: rgba(0, 0, 0, 0.55);
	--color-glass-black-700: rgba(0, 0, 0, 0.65);
	--color-glass-black-800: rgba(0, 0, 0, 0.75);
	--color-glass-black-900: rgba(0, 0, 0, 0.85);

	/* ========== TOKENS (espacio, radius, tipografía, line) ========== */
	--spacing: 0.25rem;
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--radius-sm: 0.25rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-3xl: 1.5rem;
	--text-xs: 0.75rem;
	--text-xs--line-height: calc(1 / 0.75);
	--text-sm: 0.875rem;
	--text-sm--line-height: calc(1.25 / 0.875);
	--text-base: 1rem;
	--text-base--line-height: calc(1.5 / 1);
	--text-bs: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.25rem;
	--text-lg--line-height: calc(1.75 / 1.125);
	--text-xl: 1.5rem;
	--text-xl--line-height: calc(1.75 / 1.25);
	--text-2xl: 1.875rem;
	--text-2xl--line-height: calc(2 / 1.5);
	--text-3xl: 2.25rem;
	--text-3xl--line-height: calc(2.25 / 1.875);
	--text-4xl: 3rem;
	--text-4xl--line-height: calc(2.5 / 2.25);
	--text-5xl: 3.75rem;
	--text-5xl--line-height: 1;
	--text-6xl: 3.75rem;
	--text-6xl--line-height: 1;
	--font-sans: 'Inter', sans-serif;
	--font-display: 'Lexend', sans-serif;
	--font-mono: 'JetBrains Mono', monospace;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--leading-tight: 1.25;
	--leading-snug: 1.375;
	--leading-relaxed: 1.625;
	--line-width: 0.0625rem;
	--line-gap: 0.25rem;
	--line-offset-start: 3rem;
	--line-offset-end: 3rem;
	--line-fade-start: 3rem;
	--line-fade-end: 3rem;
	--glass-sm: 0.25rem;
	--glass-md: 0.5rem;
	--glass-lg: 0.75rem;
	--glass-xl: 1rem;
	--blur-xs: 4px;
	--blur-sm: 8px;
	--blur-md: 12px;
	--blur-xl: 24px;
	--color-black: #000;
	--color-white: #fff;
	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--animate-spin: spin 1s linear infinite;
	--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	--aspect-video: 16 / 9;
	--default-transition-duration: 0.15s;
	--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	--default-font-family: 'Inter', sans-serif;
	--default-mono-font-family: 'JetBrains Mono', monospace;
}

/* ========== TEMA LIGHT ========== */
.light {
	--color-bg-100: var(--color-neutral-050);
	--color-bg-200: var(--color-neutral-100);
	--color-bg-300: var(--color-neutral-200);
	--color-bg-100-alt: var(--color-neutral-900);
	--color-bg-200-alt: var(--color-neutral-850);
	--color-bg-300-alt: var(--color-neutral-800);
	--color-text-100: var(--color-neutral-800);
	--color-text-200: var(--color-neutral-700);
	--color-text-300: var(--color-neutral-600);
	--color-text-100-alt: var(--color-neutral-050);
	--color-text-200-alt: var(--color-neutral-200);
	--color-text-300-alt: var(--color-neutral-400);
	--color-border-100: var(--color-neutral-400);
	--color-border-200: var(--color-neutral-300);
	--color-border-300: var(--color-neutral-200);
	--color-bg-900: var(--color-neutral-900);
	--color-border-100-alt: var(--color-neutral-600);
	--color-border-200-alt: var(--color-neutral-500);
	--color-border-300-alt: var(--color-neutral-400);
	--color-brand-bg-100: var(--color-blue-100);
	--color-brand-bg-200: var(--color-blue-300);
	--color-brand-bg-300: var(--color-blue-400);
	--color-brand-100: var(--color-blue-600);
	--color-brand-200: var(--color-blue-700);
	--color-brand-300: var(--color-blue-800);
	--color-brand-outline: var(--color-blue-400);
	--color-accent-bg-100: var(--color-neutral-200);
	--color-accent-bg-200: var(--color-neutral-100);
	--color-accent-100: var(--color-blue-600);
	--color-accent-200: var(--color-blue-500);
	--color-accent-300: var(--color-blue-300);
	--color-accent-outline: var(--color-blue-400);
	--color-disabled-bg: var(--color-neutral-200);
	--color-disabled-text: var(--color-neutral-400);
	--color-disabled-border: var(--color-neutral-300);
	--color-graysc-100: var(--color-neutral-500);
	--color-graysc-200: var(--color-neutral-400);
	--color-graysc-300: var(--color-neutral-300);
	--color-positive-100: var(--color-green-500);
	--color-positive-200: var(--color-green-400);
	--color-positive-300: var(--color-green-300);
	--color-note-100: var(--color-yellow-500);
	--color-note-200: var(--color-yellow-400);
	--color-note-300: var(--color-yellow-300);
	--color-advice-100: var(--color-orange-500);
	--color-advice-200: var(--color-orange-400);
	--color-advice-300: var(--color-orange-300);
	--color-negative-100: var(--color-red-500);
	--color-negative-200: var(--color-red-400);
	--color-negative-300: var(--color-red-300);
	--color-context-100: var(--color-violet-500);
	--color-context-200: var(--color-violet-400);
	--color-context-300: var(--color-violet-300);
	--color-glass-bg-100: var(--color-glass-white-100);
	--color-glass-bg-200: var(--color-glass-white-200);
	--color-glass-bg-300: var(--color-glass-white-300);
	--color-glass-bg-400: var(--color-glass-white-400);
	--color-glass-bg-500: var(--color-glass-white-500);
	--color-glass-bg-600: var(--color-glass-white-600);
	--color-glass-bg-700: var(--color-glass-white-700);
	--color-glass-bg-800: var(--color-glass-white-800);
	--color-glass-bg-900: var(--color-glass-white-900);
	--color-glass-border-100: var(--color-glass-white-100);
	--color-glass-border-200: var(--color-glass-white-200);
	--color-glass-border-300: var(--color-glass-white-300);
}

/* ========== TEMA DARK ========== */
.dark {
	--color-bg-100: var(--color-neutral-850);
	--color-bg-200: var(--color-neutral-900);
	--color-bg-300: var(--color-neutral-950);
	--color-bg-100-alt: var(--color-neutral-050);
	--color-bg-200-alt: var(--color-neutral-100);
	--color-bg-300-alt: var(--color-neutral-200);
	--color-text-100: var(--color-neutral-050);
	--color-text-200: var(--color-neutral-200);
	--color-text-300: var(--color-neutral-400);
	--color-text-100-alt: var(--color-neutral-900);
	--color-text-200-alt: var(--color-neutral-800);
	--color-text-300-alt: var(--color-neutral-600);
	--color-border-100: var(--color-neutral-700);
	--color-border-200: var(--color-neutral-800);
	--color-border-300: var(--color-neutral-850);
	--color-bg-900: var(--color-neutral-950);
	--color-border-100-alt: var(--color-neutral-400);
	--color-border-200-alt: var(--color-neutral-300);
	--color-border-300-alt: var(--color-neutral-200);
	--color-brand-bg-100: var(--color-blue-900);
	--color-brand-bg-200: var(--color-blue-800);
	--color-brand-bg-300: var(--color-blue-700);
	--color-brand-100: var(--color-blue-500);
	--color-brand-200: var(--color-blue-400);
	--color-brand-300: var(--color-blue-300);
	--color-brand-outline: var(--color-blue-400);
	--color-accent-bg-100: var(--color-neutral-800);
	--color-accent-bg-200: var(--color-neutral-850);
	--color-accent-100: var(--color-blue-500);
	--color-accent-200: var(--color-blue-600);
	--color-accent-300: var(--color-blue-700);
	--color-accent-outline: var(--color-blue-400);
	--color-disabled-bg: var(--color-neutral-900);
	--color-disabled-text: var(--color-neutral-700);
	--color-disabled-border: var(--color-neutral-800);
	--color-graysc-100: var(--color-neutral-500);
	--color-graysc-200: var(--color-neutral-700);
	--color-graysc-300: var(--color-neutral-800);
	--color-positive-100: var(--color-green-500);
	--color-positive-200: var(--color-green-700);
	--color-positive-300: var(--color-green-800);
	--color-note-100: var(--color-yellow-500);
	--color-note-200: var(--color-yellow-700);
	--color-note-300: var(--color-yellow-800);
	--color-advice-100: var(--color-orange-500);
	--color-advice-200: var(--color-orange-700);
	--color-advice-300: var(--color-orange-800);
	--color-negative-100: var(--color-red-500);
	--color-negative-200: var(--color-red-700);
	--color-negative-300: var(--color-red-800);
	--color-context-100: var(--color-violet-500);
	--color-context-200: var(--color-violet-700);
	--color-context-300: var(--color-violet-800);
	--color-glass-bg-100: var(--color-glass-black-100);
	--color-glass-bg-200: var(--color-glass-black-200);
	--color-glass-bg-300: var(--color-glass-black-300);
	--color-glass-bg-400: var(--color-glass-black-400);
	--color-glass-bg-500: var(--color-glass-black-500);
	--color-glass-bg-600: var(--color-glass-black-600);
	--color-glass-bg-700: var(--color-glass-black-700);
	--color-glass-bg-800: var(--color-glass-black-800);
	--color-glass-bg-900: var(--color-glass-black-900);
	--color-glass-border-100: var(--color-glass-black-100);
	--color-glass-border-200: var(--color-glass-black-200);
	--color-glass-border-300: var(--color-glass-black-300);
}

/* Default (sin clase .light/.dark): usar tema light */
:root:not(.dark) {
	--color-bg-100: var(--color-neutral-050);
	--color-bg-200: var(--color-neutral-100);
	--color-bg-300: var(--color-neutral-200);
	--color-text-100: var(--color-neutral-800);
	--color-text-200: var(--color-neutral-700);
	--color-text-300: var(--color-neutral-600);
	--color-border-100: var(--color-neutral-400);
	--color-border-200: var(--color-neutral-300);
	--color-border-300: var(--color-neutral-200);
	--color-bg-900: var(--color-neutral-900);
	--color-brand-100: var(--color-blue-600);
	--color-brand-200: var(--color-blue-700);
	--color-accent-100: var(--color-blue-600);
	--color-accent-200: var(--color-blue-500);
	--color-accent-bg-100: var(--color-neutral-200);
	--color-accent-bg-200: var(--color-neutral-100);
	--color-glass-bg-100: var(--color-glass-white-100);
	--color-glass-bg-200: var(--color-glass-white-200);
	--color-glass-border-100: var(--color-glass-white-100);
	--color-glass-border-200: var(--color-glass-white-200);
}