/* =========================================================
	 kui tokens — variables + Shoelace overrides
	 Light es el tema por defecto. Dark se activa con
	 la clase .sl-theme-dark (estándar de Shoelace).
	 Ver: app/docs/css.md para documentación completa.
	 ========================================================= */

/* =========================================================
	 LIGHT THEME (default)
	 ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');


:root {
	/* 🎨 Paleta de colores */
	--c-primary: 250, 170, 40; /* color primaario */
	--c-secondary: 250, 100, 10; /* color secundrio */
	--c-tertiary: 75, 20, 110; /* color terciario */

	--c-success: 106, 199, 90;   /* Verde */
	--c-danger: 231, 76, 60;     /* Rojo */
	--c-warning: 241, 196, 15;   /* Amarillo */
	--c-info: 103, 186, 241;      /* Turquesa */
	
	--c-light: 236, 240, 241;    /* color claro */
	--c-dark: 44, 62, 80;        /* Gris oscuro */

	--c-text: 20, 23, 40;    /* color de texto general */
	--c-background: 255, 255, 255; /* color de fondo general por ej. de fondo de card */
	/* 🔤 Tipografía */
	--font-family-base: 'Inter', Tahoma, Arial, sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.5;
	/* 📏 Espaciados */
	--spacer-0: 0;
	--spacer-1: 0.25rem;
	--spacer-2: 0.5rem;
	--spacer-3: 1rem;
	--spacer-4: 1.5rem;
	--spacer-5: 3rem;

	/* 🔲 Bordes */
	--border-radius: 1rem;
	--border-width: 1px;
	/* ✨ Sombras */
	--box-shadow: 0 0.5rem 1rem rgba(var(--c-dark), 0.15);
	--backdrop-filter: blur(.2rem) saturate(150%);
}

html.sl-theme-dark {
	--c-text: 239, 227, 202;
	--c-background: 14, 18, 23;
}



:root {
	--kui-surface: #ffffff;
	--kui-surface-hover: #f0f1f4;
	--kui-elevated: #f7f8fa;
	--kui-border: #e2e4e9;
	--kui-border-strong: #c9cdd6;
	--kui-border-red: #f3d4d2;

	--kui-info: #2f7fd1;
	--kui-info-soft: rgba(47, 127, 209, 0.12);
	--kui-header-bg: rgba(255, 255, 255, 0.82);

	--kui-red: #e01b1b;
	--kui-red-strong: #c41616;
	--kui-red-soft: rgba(224, 27, 27, 0.12);
	--kui-green: #1a9e6b;
	--kui-green-soft: rgba(26, 158, 107, 0.12);
	--kui-yellow: #c79100;
	--kui-yellow-soft: rgba(199, 145, 0, 0.14);

	--kui-text: #111418;
	--kui-text-main: #2a2e35;
	--kui-text-muted: #6b7280;
	--kui-text-faint: #9aa1ad;

	--kui-font: 'Inter', system-ui, -apple-system, sans-serif;
	--kui-font-size: 1rem;

	--kui-radius-card: 1.375rem;
	--kui-radius-sm: 0.625rem;
	--kui-radius-pill: 999px;

	--kui-sidebar-normal: 20rem;
	--kui-sidebar-condensed: 8rem;
	--kui-sidebar-minimal: 5rem;

	--kui-sidebar-collapsed: 4.75rem;
	--kui-header-h: 4.5rem;
	--kui-gap: 1.25rem;
}

/* =========================================================
	 DARK THEME (activo solo con .sl-theme-dark)
	 ========================================================= */
.sl-theme-dark {
	--kui-bg: #0d0d0e;
	--kui-surface: #16161a;
	--kui-surface-hover: #1b1b20;
	--kui-elevated: #1e1e24;
	--kui-border: #2a2a30;
	--kui-border-strong: #3a3a42;
	--kui-border-red: #3a1c1f;

	--kui-info: #45a5ff;
	--kui-info-soft: rgba(69, 165, 255, 0.15);
	--kui-header-bg: rgba(13, 13, 14, 0.82);

	--kui-red: #ff3b30;
	--kui-red-strong: #e63129;
	--kui-red-soft: rgba(255, 59, 48, 0.15);
	--kui-green: #30d98b;
	--kui-green-soft: rgba(48, 217, 139, 0.14);
	--kui-yellow: #ffcf40;
	--kui-yellow-soft: rgba(255, 207, 64, 0.14);

	--kui-text: #ffffff;
	--kui-text-main: #e8e8ea;
	--kui-text-muted: #9a9aa2;
	--kui-text-faint: #6b6b73;
}

/* Shoelace overrides — light (coincide con la base light.css) */
:root {
	--sl-color-primary-50:  rgb(255, 249, 235);
	--sl-color-primary-100: rgb(255, 240, 204);
	--sl-color-primary-200: rgb(255, 227, 158);
	--sl-color-primary-300: rgb(253, 210, 110);
	--sl-color-primary-400: rgb(251, 190, 70);
	/* Base */
	--sl-color-primary-500: rgb(250, 170, 40);

	--sl-color-primary-600: rgb(226, 151, 33);
	--sl-color-primary-700: rgb(194, 127, 24);
	--sl-color-primary-800: rgb(155, 99, 18);
	--sl-color-primary-900: rgb(117, 73, 13);
	--sl-color-primary-950: rgb(71, 43, 7);


/*	--sl-color-neutral-0: #ffffff;
	--sl-color-neutral-50: #f7f8fa;
	--sl-color-neutral-100: #f0f1f4;
	--sl-color-neutral-200: #e2e4e9;
	--sl-color-neutral-400: #9aa1ad;
	--sl-color-neutral-600: #6b7280;
	--sl-color-neutral-900: #2a2e35;
	--sl-color-primary-500: #e01b1b;
	--sl-color-primary-600: #c41616;
	--sl-color-success-500: #1a9e6b;
	--sl-color-warning-500: #c79100;
	--sl-color-danger-500: #e01b1b;
	--sl-border-radius-medium: 0.75rem;
	--sl-font-sans: var(--kui-font);*/
}

/* Shoelace overrides — dark */
html.sl-theme-dark {
/*  --sl-color-neutral-0: #0d0d0e;
	--sl-color-neutral-50: #16161a;
	--sl-color-neutral-100: #1e1e24;
	--sl-color-neutral-200: #2a2a30;
	--sl-color-neutral-400: #6b6b73;
	--sl-color-neutral-600: #9a9aa2;
	--sl-color-neutral-900: #e8e8ea;
	--sl-color-primary-500: #e01b1b;
	--sl-color-primary-600: #c41616;
	--sl-color-success-500: #30d98b;
	--sl-color-warning-500: #ffcf40;
	--sl-color-danger-500: #ff3b30;*/
}