@bsginstitute/bsg-integra 0.0.1

package/src/lib/tokens/shadows.css

@@ -0,0 +1,296 @@
+@theme {
+  /* ============================================
+     Shadow Colors - Base
+     ============================================ */
+  --shadow-color-base: 0 0 0; /* RGB negro */
+  --shadow-color-primary: 139 92 246; /* RGB del primary-500 */
+  --shadow-color-success: 34 197 94; /* RGB del success-500 */
+  --shadow-color-warning: 234 179 8; /* RGB del warning-500 */
+  --shadow-color-danger: 239 68 68; /* RGB del danger-500 */
+  --shadow-color-info: 14 165 233; /* RGB del info-500 */
+
+  /* ============================================
+     Box Shadows - Elevation System
+     Basado en Material Design con mejoras modernas
+     ============================================ */
+
+  /* Sin sombra */
+  --shadow-none: none;
+
+  /* Extra Small - Elementos sutilmente elevados */
+  --shadow-xs: 0 1px 2px 0 rgb(var(--shadow-color-base) / 0.05);
+
+  /* Small - Cards en reposo, botones elevados */
+  --shadow-sm:
+    0 1px 3px 0 rgb(var(--shadow-color-base) / 0.1),
+    0 1px 2px -1px rgb(var(--shadow-color-base) / 0.1);
+
+  /* Medium - Cards hover, dropdowns pequeños */
+  --shadow-md:
+    0 4px 6px -1px rgb(var(--shadow-color-base) / 0.1),
+    0 2px 4px -2px rgb(var(--shadow-color-base) / 0.1);
+
+  /* Large - Modales, dropdowns grandes */
+  --shadow-lg:
+    0 10px 15px -3px rgb(var(--shadow-color-base) / 0.1),
+    0 4px 6px -4px rgb(var(--shadow-color-base) / 0.1);
+
+  /* Extra Large - Navegación flotante, popovers */
+  --shadow-xl:
+    0 20px 25px -5px rgb(var(--shadow-color-base) / 0.1),
+    0 8px 10px -6px rgb(var(--shadow-color-base) / 0.1);
+
+  /* 2XL - Dialogs grandes, sheets */
+  --shadow-2xl: 0 25px 50px -12px rgb(var(--shadow-color-base) / 0.25);
+
+  /* 3XL - Maximum elevation */
+  --shadow-3xl: 0 35px 60px -15px rgb(var(--shadow-color-base) / 0.3);
+
+  /* ============================================
+     Inner Shadows - Efectos de profundidad
+     ============================================ */
+  --shadow-inner-sm: inset 0 1px 2px 0 rgb(var(--shadow-color-base) / 0.05);
+  --shadow-inner: inset 0 2px 4px 0 rgb(var(--shadow-color-base) / 0.06);
+  --shadow-inner-md: inset 0 4px 6px 0 rgb(var(--shadow-color-base) / 0.08);
+  --shadow-inner-lg: inset 0 8px 12px 0 rgb(var(--shadow-color-base) / 0.1);
+
+  /* ============================================
+     Colored Shadows - Sombras con tinte
+     Tendencia moderna para branded experiences
+     ============================================ */
+
+  /* Primary colored shadows */
+  --shadow-primary-sm:
+    0 1px 3px 0 rgb(var(--shadow-color-primary) / 0.2),
+    0 1px 2px -1px rgb(var(--shadow-color-primary) / 0.2);
+
+  --shadow-primary-md:
+    0 4px 6px -1px rgb(var(--shadow-color-primary) / 0.2),
+    0 2px 4px -2px rgb(var(--shadow-color-primary) / 0.2);
+
+  --shadow-primary-lg:
+    0 10px 15px -3px rgb(var(--shadow-color-primary) / 0.2),
+    0 4px 6px -4px rgb(var(--shadow-color-primary) / 0.2);
+
+  --shadow-primary-xl:
+    0 20px 25px -5px rgb(var(--shadow-color-primary) / 0.25),
+    0 8px 10px -6px rgb(var(--shadow-color-primary) / 0.25);
+
+  /* Success colored shadows */
+  --shadow-success-sm:
+    0 1px 3px 0 rgb(var(--shadow-color-success) / 0.2),
+    0 1px 2px -1px rgb(var(--shadow-color-success) / 0.2);
+
+  --shadow-success-md:
+    0 4px 6px -1px rgb(var(--shadow-color-success) / 0.2),
+    0 2px 4px -2px rgb(var(--shadow-color-success) / 0.2);
+
+  /* Warning colored shadows */
+  --shadow-warning-sm:
+    0 1px 3px 0 rgb(var(--shadow-color-warning) / 0.2),
+    0 1px 2px -1px rgb(var(--shadow-color-warning) / 0.2);
+
+  --shadow-warning-md:
+    0 4px 6px -1px rgb(var(--shadow-color-warning) / 0.2),
+    0 2px 4px -2px rgb(var(--shadow-color-warning) / 0.2);
+
+  /* Danger colored shadows */
+  --shadow-danger-sm:
+    0 1px 3px 0 rgb(var(--shadow-color-danger) / 0.2),
+    0 1px 2px -1px rgb(var(--shadow-color-danger) / 0.2);
+
+  --shadow-danger-md:
+    0 4px 6px -1px rgb(var(--shadow-color-danger) / 0.2),
+    0 2px 4px -2px rgb(var(--shadow-color-danger) / 0.2);
+
+  /* Info colored shadows */
+  --shadow-info-sm:
+    0 1px 3px 0 rgb(var(--shadow-color-info) / 0.2),
+    0 1px 2px -1px rgb(var(--shadow-color-info) / 0.2);
+
+  --shadow-info-md:
+    0 4px 6px -1px rgb(var(--shadow-color-info) / 0.2),
+    0 2px 4px -2px rgb(var(--shadow-color-info) / 0.2);
+
+  /* ============================================
+     Glow Effects - Para estados interactivos
+     ============================================ */
+
+  /* Primary glow */
+  --shadow-glow-primary-sm: 0 0 8px rgb(var(--shadow-color-primary) / 0.3);
+  --shadow-glow-primary-md: 0 0 16px rgb(var(--shadow-color-primary) / 0.4);
+  --shadow-glow-primary-lg: 0 0 24px rgb(var(--shadow-color-primary) / 0.5);
+
+  /* Success glow */
+  --shadow-glow-success-sm: 0 0 8px rgb(var(--shadow-color-success) / 0.3);
+  --shadow-glow-success-md: 0 0 16px rgb(var(--shadow-color-success) / 0.4);
+
+  /* Warning glow */
+  --shadow-glow-warning-sm: 0 0 8px rgb(var(--shadow-color-warning) / 0.3);
+  --shadow-glow-warning-md: 0 0 16px rgb(var(--shadow-color-warning) / 0.4);
+
+  /* Danger glow */
+  --shadow-glow-danger-sm: 0 0 8px rgb(var(--shadow-color-danger) / 0.3);
+  --shadow-glow-danger-md: 0 0 16px rgb(var(--shadow-color-danger) / 0.4);
+
+  /* White glow (para fondos oscuros) */
+  --shadow-glow-white-sm: 0 0 8px rgb(255 255 255 / 0.3);
+  --shadow-glow-white-md: 0 0 16px rgb(255 255 255 / 0.4);
+
+  /* ============================================
+     Component Shadows - Button
+     ============================================ */
+  --shadow-button-default: var(--shadow-none);
+  --shadow-button-hover: var(--shadow-sm);
+  --shadow-button-active: var(--shadow-xs);
+  --shadow-button-focus: 0 0 0 3px rgb(var(--shadow-color-primary) / 0.1);
+
+  /* Button primary variant */
+  --shadow-button-primary: var(--shadow-sm);
+  --shadow-button-primary-hover: var(--shadow-md);
+  --shadow-button-primary-focus: 0 0 0 3px
+    rgb(var(--shadow-color-primary) / 0.2);
+
+  /* ============================================
+     Component Shadows - Card
+     ============================================ */
+  --shadow-card-default: var(--shadow-sm);
+  --shadow-card-hover: var(--shadow-md);
+  --shadow-card-active: var(--shadow-lg);
+  --shadow-card-elevated: var(--shadow-lg);
+
+  /* ============================================
+     Component Shadows - Input
+     ============================================ */
+  --shadow-input-default: var(--shadow-none);
+  --shadow-input-focus: 0 0 0 3px rgb(var(--shadow-color-primary) / 0.1);
+  --shadow-input-error: 0 0 0 3px rgb(var(--shadow-color-danger) / 0.1);
+  --shadow-input-success: 0 0 0 3px rgb(var(--shadow-color-success) / 0.1);
+
+  /* ============================================
+     Component Shadows - Dialog/Modal
+     ============================================ */
+  --shadow-dialog: var(--shadow-2xl);
+  --shadow-modal: var(--shadow-2xl);
+  --shadow-sheet: var(--shadow-xl);
+
+  /* ============================================
+     Component Shadows - Dropdown/Menu
+     ============================================ */
+  --shadow-dropdown: var(--shadow-lg);
+  --shadow-menu: var(--shadow-lg);
+  --shadow-context-menu: var(--shadow-xl);
+
+  /* ============================================
+     Component Shadows - Popover/Tooltip
+     ============================================ */
+  --shadow-popover: var(--shadow-md);
+  --shadow-tooltip: var(--shadow-sm);
+
+  /* ============================================
+     Component Shadows - Toast/Notification
+     ============================================ */
+  --shadow-toast: var(--shadow-lg);
+  --shadow-notification: var(--shadow-lg);
+
+  /* ============================================
+     Component Shadows - Avatar
+     ============================================ */
+  --shadow-avatar-sm: var(--shadow-xs);
+  --shadow-avatar: var(--shadow-sm);
+  --shadow-avatar-lg: var(--shadow-md);
+
+  /* ============================================
+     Component Shadows - Badge
+     ============================================ */
+  --shadow-badge: var(--shadow-xs);
+
+  /* ============================================
+     Component Shadows - Navigation
+     ============================================ */
+  --shadow-navbar: var(--shadow-sm);
+  --shadow-sidebar: var(--shadow-md);
+  --shadow-floating-nav: var(--shadow-xl);
+
+  /* ============================================
+     Component Shadows - Table
+     ============================================ */
+  --shadow-table-header: var(--shadow-xs);
+  --shadow-table-row-hover: var(--shadow-sm);
+
+  /* ============================================
+     Component Shadows - Image/Media
+     ============================================ */
+  --shadow-image: var(--shadow-sm);
+  --shadow-image-hover: var(--shadow-md);
+
+  /* ============================================
+     Text Shadows - Tipografía
+     ============================================ */
+  --text-shadow-none: none;
+  --text-shadow-sm: 0 1px 2px rgb(var(--shadow-color-base) / 0.3);
+  --text-shadow-md: 0 2px 4px rgb(var(--shadow-color-base) / 0.4);
+  --text-shadow-lg: 0 4px 8px rgb(var(--shadow-color-base) / 0.5);
+
+  /* Text glow effects */
+  --text-shadow-glow-primary: 0 0 8px rgb(var(--shadow-color-primary) / 0.6);
+  --text-shadow-glow-white: 0 0 8px rgb(255 255 255 / 0.8);
+
+  /* ============================================
+     Layered Shadows - Combinaciones realistas
+     Para efectos ultra-realistas (múltiples capas)
+     ============================================ */
+
+  /* Floating effect - Elementos que "flotan" sobre la UI */
+  --shadow-floating:
+    0 2px 4px -1px rgb(var(--shadow-color-base) / 0.06),
+    0 4px 6px -1px rgb(var(--shadow-color-base) / 0.08),
+    0 10px 15px -3px rgb(var(--shadow-color-base) / 0.1);
+
+  /* Lifted effect - Elementos "levantados" con profundidad */
+  --shadow-lifted:
+    0 4px 6px -2px rgb(var(--shadow-color-base) / 0.05),
+    0 10px 15px -3px rgb(var(--shadow-color-base) / 0.08),
+    0 20px 25px -5px rgb(var(--shadow-color-base) / 0.1);
+
+  /* Dramatic effect - Máxima profundidad */
+  --shadow-dramatic:
+    0 10px 15px -3px rgb(var(--shadow-color-base) / 0.1),
+    0 20px 25px -5px rgb(var(--shadow-color-base) / 0.15),
+    0 30px 40px -10px rgb(var(--shadow-color-base) / 0.2);
+
+  /* Soft glow - Glow suave alrededor del elemento */
+  --shadow-soft-glow:
+    0 0 0 1px rgb(var(--shadow-color-base) / 0.05),
+    0 2px 4px rgb(var(--shadow-color-base) / 0.05),
+    0 8px 16px rgb(var(--shadow-color-base) / 0.08);
+
+  /* ============================================
+     Keyboard Focus Shadows - Accesibilidad
+     Compatible con focus-visible
+     ============================================ */
+  --shadow-focus-default: 0 0 0 3px rgb(var(--shadow-color-primary) / 0.15);
+  --shadow-focus-primary: 0 0 0 3px rgb(var(--shadow-color-primary) / 0.2);
+  --shadow-focus-error: 0 0 0 3px rgb(var(--shadow-color-danger) / 0.2);
+  --shadow-focus-success: 0 0 0 3px rgb(var(--shadow-color-success) / 0.2);
+
+  /* Focus ring con borde */
+  --shadow-focus-ring:
+    0 0 0 2px var(--color-background-default, #ffffff),
+    0 0 0 4px rgb(var(--shadow-color-primary) / 0.3);
+
+  /* ============================================
+     Neumorphism Shadows - Estilo Soft UI
+     ============================================ */
+  --shadow-neumorphic-light:
+    -4px -4px 8px rgb(255 255 255 / 0.5),
+    4px 4px 8px rgb(var(--shadow-color-base) / 0.1);
+
+  --shadow-neumorphic-dark:
+    -4px -4px 8px rgb(255 255 255 / 0.05),
+    4px 4px 8px rgb(var(--shadow-color-base) / 0.2);
+
+  --shadow-neumorphic-inset:
+    inset -2px -2px 4px rgb(255 255 255 / 0.5),
+    inset 2px 2px 4px rgb(var(--shadow-color-base) / 0.1);
+}

package/src/lib/tokens/spacing.css

@@ -0,0 +1,199 @@
+@theme {
+  /* ============================================
+     Spacing Scale - Base 4px
+     Uso: margin, padding, gap, inset
+     ============================================ */
+
+  /* Valores extremos */
+  --spacing-0: 0rem;
+  --spacing-px: 0.0625rem;
+
+  /* Escala pequeña (0-4) */
+  --spacing-0-5: 0.125rem; /* 2px */
+  --spacing-1: 0.25rem; /* 4px */
+  --spacing-1-5: 0.375rem; /* 6px */
+  --spacing-2: 0.5rem; /* 8px */
+  --spacing-2-5: 0.625rem; /* 10px */
+  --spacing-3: 0.75rem; /* 12px */
+  --spacing-3-5: 0.875rem; /* 14px */
+  --spacing-4: 1rem; /* 16px */
+
+  /* Escala media (5-12) */
+  --spacing-5: 1.25rem; /* 20px */
+  --spacing-6: 1.5rem; /* 24px */
+  --spacing-7: 1.75rem; /* 28px */
+  --spacing-8: 2rem; /* 32px */
+  --spacing-9: 2.25rem; /* 36px */
+  --spacing-10: 2.5rem; /* 40px */
+  --spacing-11: 2.75rem; /* 44px */
+  --spacing-12: 3rem; /* 48px */
+
+  /* Escala grande (14-24) */
+  --spacing-14: 3.5rem; /* 56px */
+  --spacing-16: 4rem; /* 64px */
+  --spacing-18: 4.5rem; /* 72px */
+  --spacing-20: 5rem; /* 80px */
+  --spacing-24: 6rem; /* 96px */
+
+  /* Escala extra grande (28-96) */
+  --spacing-28: 7rem; /* 112px */
+  --spacing-32: 8rem; /* 128px */
+  --spacing-36: 9rem; /* 144px */
+  --spacing-40: 10rem; /* 160px */
+  --spacing-44: 11rem; /* 176px */
+  --spacing-48: 12rem; /* 192px */
+  --spacing-52: 13rem; /* 208px */
+  --spacing-56: 14rem; /* 224px */
+  --spacing-60: 15rem; /* 240px */
+  --spacing-64: 16rem; /* 256px */
+  --spacing-72: 18rem; /* 288px */
+  --spacing-80: 20rem; /* 320px */
+  --spacing-96: 24rem; /* 384px */
+
+  /* ============================================
+     Spacing Semántico - T-Shirt Sizes
+     Uso rápido para componentes comunes
+     ============================================ */
+  --spacing-xs: var(--spacing-2); /* 8px */
+  --spacing-sm: var(--spacing-3); /* 12px */
+  --spacing-md: var(--spacing-4); /* 16px */
+  --spacing-lg: var(--spacing-6); /* 24px */
+  --spacing-xl: var(--spacing-8); /* 32px */
+  --spacing-2xl: var(--spacing-12); /* 48px */
+  --spacing-3xl: var(--spacing-16); /* 64px */
+  --spacing-4xl: var(--spacing-24); /* 96px */
+
+  /* ============================================
+     Component Spacing - Padding Interno
+     Uso: padding de componentes específicos
+     ============================================ */
+
+  /* Button Padding */
+  --spacing-button-sm-x: var(--spacing-3); /* 12px */
+  --spacing-button-sm-y: var(--spacing-1-5); /* 6px */
+  --spacing-button-md-x: var(--spacing-4); /* 16px */
+  --spacing-button-md-y: var(--spacing-2); /* 8px */
+  --spacing-button-lg-x: var(--spacing-6); /* 24px */
+  --spacing-button-lg-y: var(--spacing-3); /* 12px */
+
+  /* Input Padding */
+  --spacing-input-sm-x: var(--spacing-2-5); /* 10px */
+  --spacing-input-sm-y: var(--spacing-1-5); /* 6px */
+  --spacing-input-md-x: var(--spacing-3); /* 12px */
+  --spacing-input-md-y: var(--spacing-2); /* 8px */
+  --spacing-input-lg-x: var(--spacing-4); /* 16px */
+  --spacing-input-lg-y: var(--spacing-2-5); /* 10px */
+
+  /* Card Padding */
+  --spacing-card-sm: var(--spacing-4); /* 16px */
+  --spacing-card-md: var(--spacing-6); /* 24px */
+  --spacing-card-lg: var(--spacing-8); /* 32px */
+
+  /* Dialog/Modal Padding */
+  --spacing-dialog-sm: var(--spacing-4); /* 16px */
+  --spacing-dialog-md: var(--spacing-6); /* 24px */
+  --spacing-dialog-lg: var(--spacing-8); /* 32px */
+
+  /* ============================================
+     Stack Spacing - Espaciado Vertical
+     Uso: gap en flex/grid verticales (margin-bottom)
+     ============================================ */
+  --spacing-stack-xs: var(--spacing-2); /* 8px */
+  --spacing-stack-sm: var(--spacing-3); /* 12px */
+  --spacing-stack-md: var(--spacing-4); /* 16px */
+  --spacing-stack-lg: var(--spacing-6); /* 24px */
+  --spacing-stack-xl: var(--spacing-8); /* 32px */
+  --spacing-stack-2xl: var(--spacing-12); /* 48px */
+
+  /* ============================================
+     Inline Spacing - Espaciado Horizontal
+     Uso: gap en flex/grid horizontales
+     ============================================ */
+  --spacing-inline-xs: var(--spacing-1); /* 4px */
+  --spacing-inline-sm: var(--spacing-2); /* 8px */
+  --spacing-inline-md: var(--spacing-3); /* 12px */
+  --spacing-inline-lg: var(--spacing-4); /* 16px */
+  --spacing-inline-xl: var(--spacing-6); /* 24px */
+
+  /* ============================================
+     Section Spacing - Espaciado entre Secciones
+     Uso: margin/padding entre grandes bloques de contenido
+     ============================================ */
+  --spacing-section-xs: var(--spacing-12); /* 48px */
+  --spacing-section-sm: var(--spacing-16); /* 64px */
+  --spacing-section-md: var(--spacing-24); /* 96px */
+  --spacing-section-lg: var(--spacing-32); /* 128px */
+  --spacing-section-xl: var(--spacing-40); /* 160px */
+  --spacing-section-2xl: var(--spacing-48); /* 192px */
+
+  /* ============================================
+     Container Widths - Anchos Máximos
+     Uso: max-width para contenedores responsivos
+     ============================================ */
+  --container-xs: 20rem; /* 320px */
+  --container-sm: 24rem; /* 384px */
+  --container-md: 28rem; /* 448px */
+  --container-lg: 32rem; /* 512px */
+  --container-xl: 36rem; /* 576px */
+  --container-2xl: 42rem; /* 672px */
+  --container-3xl: 48rem; /* 768px */
+  --container-4xl: 56rem; /* 896px */
+  --container-5xl: 64rem; /* 1024px */
+  --container-6xl: 72rem; /* 1152px */
+  --container-7xl: 80rem; /* 1280px */
+
+  /* Container Aliases */
+  --container-prose: var(--container-2xl); /* 672px - óptimo para lectura */
+  --container-content: var(--container-5xl); /* 1024px - contenido general */
+  --container-full: 100%;
+
+  /* ============================================
+     Inset - Espaciado Uniforme (todos los lados)
+     Uso: padding aplicado a los 4 lados
+     ============================================ */
+  --inset-xs: var(--spacing-2); /* 8px */
+  --inset-sm: var(--spacing-3); /* 12px */
+  --inset-md: var(--spacing-4); /* 16px */
+  --inset-lg: var(--spacing-6); /* 24px */
+  --inset-xl: var(--spacing-8); /* 32px */
+  --inset-2xl: var(--spacing-12); /* 48px */
+
+  /* ============================================
+     Grid Gap - Espaciado para Grids
+     Uso: gap en CSS Grid
+     ============================================ */
+  --grid-gap-xs: var(--spacing-2); /* 8px */
+  --grid-gap-sm: var(--spacing-3); /* 12px */
+  --grid-gap-md: var(--spacing-4); /* 16px */
+  --grid-gap-lg: var(--spacing-6); /* 24px */
+  --grid-gap-xl: var(--spacing-8); /* 32px */
+
+  /* ============================================
+     Gutters - Márgenes laterales de página
+     Uso: padding-inline para layouts responsivos
+     ============================================ */
+  --gutter-mobile: var(--spacing-4); /* 16px */
+  --gutter-tablet: var(--spacing-6); /* 24px */
+  --gutter-desktop: var(--spacing-8); /* 32px */
+  --gutter-wide: var(--spacing-12); /* 48px */
+
+  /* ============================================
+     Icon Spacing - Espaciado con iconos
+     Uso: gap entre icono y texto
+     ============================================ */
+  --spacing-icon-text-sm: var(--spacing-1); /* 4px */
+  --spacing-icon-text-md: var(--spacing-2); /* 8px */
+  --spacing-icon-text-lg: var(--spacing-3); /* 12px */
+
+  /* ============================================
+     Aspect Ratios - Proporciones (Bonus)
+     ============================================ */
+  --aspect-square: 1 / 1;
+  --aspect-video: 16 / 9;
+  --aspect-video-vertical: 9 / 16;
+  --aspect-photo: 4 / 3;
+  --aspect-portrait: 3 / 4;
+  --aspect-wide: 21 / 9;
+  --aspect-ultrawide: 32 / 9;
+  --aspect-golden: 1.618 / 1;
+}

package/src/lib/tokens/themes.css

@@ -0,0 +1,148 @@
+/* ============================================
+   CSS Variables - Semantic Tokens 
+   ============================================ */
+@layer base {
+  :root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+
+    --primary: oklch(0.606 0.25 292.717);
+    --primary-foreground: oklch(0.985 0 0);
+
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+
+    --destructive: oklch(0.577 0.245 27.325);
+    --destructive-foreground: oklch(0.985 0 0);
+
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.702 0.183 293.541);
+
+    --radius: 0.625rem;
+
+    /* Sidebar tokens (shadcn pattern) */
+    --sidebar-background: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+  }
+
+  /* refactorizar tema oscuro colores */
+  .dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+
+    --card: oklch(0.145 0 0);
+    --card-foreground: oklch(0.985 0 0);
+
+    --popover: oklch(0.145 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+
+    --primary: oklch(0.985 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.985 0 0);
+
+    --border: oklch(0.269 0 0);
+    --input: oklch(0.269 0 0);
+    --ring: oklch(0.439 0 0);
+
+    /* Sidebar tokens (dark theme) */
+    --sidebar-background: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(0.269 0 0);
+    --sidebar-ring: oklch(0.439 0 0);
+  }
+}
+
+/* ============================================
+   @theme inline 
+   Genera clases utility basadas en variables CSS
+   ============================================ */
+@theme inline {
+  /* Referencias a variables de :root */
+  --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);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Sidebar color utilities */
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Radius también puede ser usado en utilities */
+  --radius: var(--radius);
+}
+
+/* ============================================
+   Theme Base Styles
+   ============================================ */
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}