:root,
.dark {
    --brand-primary: hsl(45, 89%, 35%);
    /* Ejemplo: Un amarillo dorado */
    --brand-secondary: hsl(45, 42%, 54%);

    /* Accent */
    --accent: hsl(240, 5%, 20%);
    /* Neutral para no competir */
    --accent-foreground: hsl(0, 0%, 98%);

    /* ------------------------------------------ */
    /* BASE NEUTRA - SOLUCIÓN (Low Saturation)    */
    /* He bajado la saturación (S) del 47% al 10-15% */
    /* Mantengo el Hue (H) en 220 para que sea un gris frío, no sucio */
    /* ------------------------------------------ */

    /* Fondo Deep Slate (Casi negro con tinte azulado) */
    --background: hsl(222, 47%, 4%);

    /* Texto Blanco-Gris Neutro */
    --foreground: hsl(210, 40%, 98%);

    /* Cards: Slate muy oscuro con transparencia */
    --card: hsla(222, 47%, 8%, 0.6);
    --card-foreground: hsl(210, 40%, 98%);

    /* Popover: Sólido Slate */
    --popover: hsla(222, 47%, 8%, 0.95);
    --popover-foreground: hsl(210, 40%, 98%);

    /* Muted: Slate apagado para secundarios */
    --muted: hsla(217, 32%, 17%, 0.5);
    --muted-foreground: hsl(215, 20%, 65%);

    /* Bordes: Slate Glassmorphism */
    --border: hsla(217, 32%, 91%, 0.08);
    --input: hsla(217, 32%, 17%, 0.5);

    /* ------------------------------------------ */
    /* MAPEO LÓGICO */

    --primary: var(--brand-primary);
    /* Si el amarillo es brillante, el texto encima debe ser oscuro */
    --primary-foreground: hsl(220, 15%, 8%);

    --secondary: var(--brand-secondary);
    --secondary-foreground: hsl(220, 15%, 8%);

    --ring: var(--brand-primary);

    /* --- ESTADOS FUNCIONALES --- */
    --destructive: hsl(0, 85%, 60%);
    --destructive-foreground: hsl(220, 15%, 8%);

    --info: hsl(215, 90%, 55%);
    --info-foreground: hsl(220, 15%, 8%);

    --warning: hsl(38, 92%, 50%);
    --warning-foreground: hsl(220, 15%, 8%);

    --positive: hsl(142, 70%, 45%);
    --positive-foreground: hsl(220, 15%, 8%);

    --radius: 0.75rem;

    /* Glass effects - adapt to theme */
    --glass-overlay: rgba(255, 255, 255, 0.05);
    --glass-overlay-hover: rgba(255, 255, 255, 0.1);
    --glass-overlay-active: rgba(255, 255, 255, 0.2);
    --glass-surface: rgba(10, 10, 15, 0.6);
    --glass-shadow: rgba(0, 0, 0, 0.5);
    --glass-border-glow: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(15, 23, 42, 0.08);
}

.light {
    /* --- TUS 2 COLORES (MODO LIGHT) --- */
    --brand-primary: hsl(117, 57%, 24%);
    --brand-secondary: hsl(113, 86%, 42%);

    /* BASE NEUTRA LIGHT - Slate Glass (Limpio y Tecnológico) */
    --background: hsl(210, 40%, 98%);
    --foreground: hsl(222, 47%, 11%);

    /* Cards: Blanco puro (Contraste sobre Slate) */
    --card: hsl(0, 0%, 100%);
    --card-foreground: hsl(222, 47%, 11%);

    /* Popover: Sólido blanco */
    --popover: hsl(0, 0%, 100%);
    --popover-foreground: hsl(222, 47%, 11%);

    /* Muted: Fondos sutiles Slate */
    --muted: hsl(210, 40%, 96.1%);
    --muted-foreground: hsl(215.4, 16.3%, 46.9%);

    /* Accent: Para hover states Slate */
    --accent: hsl(210, 40%, 96.1%);
    --accent-foreground: hsl(222.2, 47.4%, 11.2%);

    /* Borders: Slate para definir elementos */
    --border: hsl(214.3, 31.8%, 91.4%);
    --input: hsl(214.3, 31.8%, 91.4%);

    /* Mapeo */
    --primary: var(--brand-primary);
    --primary-foreground: hsl(0, 0%, 100%);

    --secondary: var(--brand-secondary);
    --secondary-foreground: hsl(220, 15%, 8%);

    --ring: var(--brand-primary);

    /* --- ESTADOS FUNCIONALES (LIGHT) --- */
    /* Destructive */
    --destructive: hsl(0, 84%, 50%);
    --destructive-foreground: hsl(0, 0%, 100%);

    /* Info */
    --info: hsl(221, 83%, 53%);
    --info-foreground: hsl(0, 0%, 100%);

    /* Warning */
    --warning: hsl(38, 92%, 50%);
    --warning-foreground: hsl(220, 15%, 8%);

    /* Positive */
    --positive: hsl(142, 76%, 36%);
    --positive-foreground: hsl(220, 15%, 8%);

    /* Glass effects - light mode versions */
    --glass-overlay: rgba(0, 0, 0, 0.03);
    --glass-overlay-hover: rgba(0, 0, 0, 0.06);
    --glass-overlay-active: rgba(0, 0, 0, 0.1);
    --glass-surface: rgba(255, 255, 255, 0.75);
    --glass-shadow: rgba(0, 0, 0, 0.12);
    --glass-border-glow: rgba(0, 0, 0, 0.08);
    --shadow-color: rgba(15, 23, 42, 0.08);
}

/* ========================================== */
/*      TOKENS DE DENSIDAD Y RITMO GLOBAL     */
/* ========================================== */

:root {
	--ui-body-size: 14px;
	--ui-body-leading: 1.45;
	--ui-shell-padding: 16px;
	--ui-page-margin-block: 8px;
	--ui-section-gap: 12px;
	--ui-field-gap: 6px;
	--ui-panel-padding: 12px;
	--ui-card-padding: 12px;
	--ui-card-header-padding: 44px;
	--ui-notch-height: 28px;
	--ui-control-radius: 8px;
	--ui-control-radius-sm: 6px;
	--ui-control-height-xs: 28px;
	--ui-control-height-sm: 32px;
	--ui-control-height-md: 36px;
	--ui-control-height-lg: 40px;
	--ui-control-height-xl: 44px;
	--ui-control-padding-xs: 10px;
	--ui-control-padding-sm: 12px;
	--ui-control-padding-md: 16px;
	--ui-control-padding-lg: 20px;
	--ui-control-padding-xl: 24px;
	--ui-control-font-xs: 12px;
	--ui-control-font-sm: 13px;
	--ui-control-font-md: 14px;
	--ui-control-font-lg: 15px;
	--ui-control-font-xl: 16px;
	--ui-surface-padding-sm: 8px;
	--ui-surface-padding-md: 12px;
	--ui-surface-padding-lg: 16px;
	--ui-surface-padding-xl: 20px;
	--ui-kpi-padding-x: 10px;
	--ui-kpi-padding-y: 8px;
	--ui-row-height: 32px;
	--ui-toolbar-height: 40px;
	--ui-topbar-height: 48px;
	--ui-page-header-height: 56px;
	--ui-page-footer-height: 48px;
	--ui-page-header-padding-y: 8px;
	--ui-page-footer-padding-y: 8px;
}

html[data-density='comfortable'] {
	--ui-body-size: 15px;
	--ui-body-leading: 1.5;
	--ui-shell-padding: 20px;
	--ui-page-margin-block: 12px;
	--ui-section-gap: 16px;
	--ui-field-gap: 8px;
	--ui-panel-padding: 16px;
	--ui-card-padding: 14px;
	--ui-card-header-padding: 48px;
	--ui-notch-height: 32px;
	--ui-control-height-xs: 32px;
	--ui-control-height-sm: 36px;
	--ui-control-height-md: 40px;
	--ui-control-height-lg: 44px;
	--ui-control-height-xl: 48px;
	--ui-control-padding-xs: 12px;
	--ui-control-padding-sm: 14px;
	--ui-control-padding-md: 18px;
	--ui-control-padding-lg: 22px;
	--ui-control-padding-xl: 28px;
	--ui-control-font-xs: 12px;
	--ui-control-font-sm: 14px;
	--ui-control-font-md: 15px;
	--ui-control-font-lg: 16px;
	--ui-control-font-xl: 17px;
	--ui-surface-padding-sm: 12px;
	--ui-surface-padding-md: 16px;
	--ui-surface-padding-lg: 20px;
	--ui-surface-padding-xl: 24px;
	--ui-kpi-padding-x: 12px;
	--ui-kpi-padding-y: 10px;
	--ui-row-height: 36px;
	--ui-toolbar-height: 44px;
	--ui-topbar-height: 56px;
	--ui-page-header-height: 64px;
	--ui-page-footer-height: 52px;
	--ui-page-header-padding-y: 12px;
	--ui-page-footer-padding-y: 12px;
}

html[data-density='spacious'] {
	--ui-body-size: 16px;
	--ui-body-leading: 1.55;
	--ui-shell-padding: 24px;
	--ui-page-margin-block: 16px;
	--ui-section-gap: 20px;
	--ui-field-gap: 10px;
	--ui-panel-padding: 20px;
	--ui-card-padding: 18px;
	--ui-card-header-padding: 56px;
	--ui-notch-height: 36px;
	--ui-control-height-xs: 36px;
	--ui-control-height-sm: 40px;
	--ui-control-height-md: 44px;
	--ui-control-height-lg: 48px;
	--ui-control-height-xl: 52px;
	--ui-control-padding-xs: 14px;
	--ui-control-padding-sm: 16px;
	--ui-control-padding-md: 20px;
	--ui-control-padding-lg: 24px;
	--ui-control-padding-xl: 32px;
	--ui-control-font-xs: 13px;
	--ui-control-font-sm: 14px;
	--ui-control-font-md: 16px;
	--ui-control-font-lg: 17px;
	--ui-control-font-xl: 18px;
	--ui-surface-padding-sm: 16px;
	--ui-surface-padding-md: 20px;
	--ui-surface-padding-lg: 24px;
	--ui-surface-padding-xl: 28px;
	--ui-kpi-padding-x: 14px;
	--ui-kpi-padding-y: 12px;
	--ui-row-height: 40px;
	--ui-toolbar-height: 48px;
	--ui-topbar-height: 64px;
	--ui-page-header-height: 72px;
	--ui-page-footer-height: 56px;
	--ui-page-header-padding-y: 16px;
	--ui-page-footer-padding-y: 16px;
}

@media (max-width: 767px) {
	:root {
		--ui-shell-padding: 12px;
	}

	html[data-density='comfortable'],
	html[data-density='spacious'] {
		--ui-shell-padding: 16px;
	}

	html[data-density='compact'] {
		--ui-control-height-sm: 40px;
		--ui-control-height-md: 44px;
	}
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);

    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);

    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);

    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);

    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);

    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);

    /* --- NUEVOS COLORES MAPEADOS A TAILWIND --- */
    --color-info: var(--info);
    --color-info-foreground: var(--info-foreground);

    --color-warning: var(--warning);
    --color-warning-foreground: var(--warning-foreground);

    --color-positive: var(--positive);
    --color-positive-foreground: var(--positive-foreground);
    --color-success: var(--positive);
    --color-success-foreground: var(--positive-foreground);
    /* ------------------------------------------ */

    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);

    --radius-lg: var(--radius);
    --radius-md: calc(var(--radius) - 2px);
    --radius-sm: calc(var(--radius) - 4px);

    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: Outfit, var(--font-sans);
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;


    --animate-shimmer: shimmer 0.5s infinite;

    /* Custom Spinner Animations */
    --animate-spin-clockwise: spin-clockwise 1s linear infinite;
    --animate-iteration-count-infinite: infinite;

    --anim-hover-time: 400ms;
    --anim-hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
    --glow-color: var(--primary);
}

@keyframes spin-clockwise {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}