diff --git a/web/src/index.css b/web/src/index.css
index 251022c..268e3a9 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,8 +1,17 @@
 /**
  * Global Styles
- * Estilos base y reset CSS
+ * ERP Construccion - ISEM Software
+ * Estilos base con Tailwind CSS + Design Tokens
  */
 
+/* Design Tokens (CSS Custom Properties) */
+@import './styles/variables.css';
+
+/* Tailwind directives */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* Reset básico */
 *,
 *::before,
@@ -12,30 +21,6 @@
   padding: 0;
 }
 
-/* Variables CSS (TODO: mover a theme) */
-:root {
-  --primary-color: #2563eb;
-  --secondary-color: #64748b;
-  --success-color: #22c55e;
-  --warning-color: #f59e0b;
-  --danger-color: #ef4444;
-
-  --text-primary: #1e293b;
-  --text-secondary: #64748b;
-  --text-light: #94a3b8;
-
-  --bg-primary: #ffffff;
-  --bg-secondary: #f8fafc;
-  --bg-tertiary: #f1f5f9;
-
-  --border-color: #e2e8f0;
-  --border-radius: 0.5rem;
-
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
-}
-
 /* Tipografía base */
 html {
   font-size: 16px;
@@ -44,22 +29,23 @@ html {
 }
 
 body {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, 'Helvetica Neue', Arial, sans-serif;
-  line-height: 1.5;
-  color: var(--text-primary);
-  background-color: var(--bg-secondary);
+  font-family: var(--font-family-sans);
+  line-height: var(--line-height-normal);
+  color: var(--color-foreground);
+  background-color: var(--color-background-subtle);
+  transition: background-color var(--duration-200) var(--ease-in-out),
+              color var(--duration-200) var(--ease-in-out);
 }
 
 /* Enlaces */
 a {
-  color: var(--primary-color);
+  color: var(--color-primary);
   text-decoration: none;
-  transition: color 0.2s;
+  transition: color var(--duration-150) var(--ease-in-out);
 }
 
 a:hover {
-  color: #1d4ed8;
+  color: var(--color-primary-hover);
 }
 
 /* Buttons (estilos base) */
@@ -85,23 +71,23 @@ select {
   font-size: inherit;
 }
 
-/* Scrollbar personalizado (opcional) */
+/* Scrollbar personalizado */
 ::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--bg-tertiary);
+  background: var(--color-background-muted);
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--border-color);
-  border-radius: 4px;
+  background: var(--color-border);
+  border-radius: var(--radius);
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--text-light);
+  background: var(--color-foreground-subtle);
 }
 
 /* Utilidades */
diff --git a/web/src/styles/variables.css b/web/src/styles/variables.css
new file mode 100644
index 0000000..c11438a
--- /dev/null
+++ b/web/src/styles/variables.css
@@ -0,0 +1,481 @@
+/**
+ * Design Tokens - CSS Custom Properties
+ * ERP Construccion - ISEM Software
+ * Version: 1.0.0
+ * Fuente: docs/12-frontend-specs/DESIGN-TOKENS.yml
+ */
+
+/* =============================================================================
+   COLORES DE MARCA ISEM
+   ============================================================================= */
+
+:root {
+  /* ---------------------------------------------------------------------------
+     Brand Primary - Azul ISEM
+     --------------------------------------------------------------------------- */
+  --color-brand-primary-50: #E6F3FF;
+  --color-brand-primary-100: #CCE7FF;
+  --color-brand-primary-200: #99CFFF;
+  --color-brand-primary-300: #66B7FF;
+  --color-brand-primary-400: #339FFF;
+  --color-brand-primary-500: #0061A8;
+  --color-brand-primary-600: #004D86;
+  --color-brand-primary-700: #003A65;
+  --color-brand-primary-800: #002643;
+  --color-brand-primary-900: #001322;
+  --color-brand-primary: #0061A8;
+
+  /* ---------------------------------------------------------------------------
+     Brand Secondary - Verde ISEM
+     --------------------------------------------------------------------------- */
+  --color-brand-secondary-50: #E6FFF5;
+  --color-brand-secondary-100: #CCFFEB;
+  --color-brand-secondary-200: #99FFD6;
+  --color-brand-secondary-300: #66FFC2;
+  --color-brand-secondary-400: #33FFAD;
+  --color-brand-secondary-500: #00A868;
+  --color-brand-secondary-600: #008653;
+  --color-brand-secondary-700: #00653F;
+  --color-brand-secondary-800: #00432A;
+  --color-brand-secondary-900: #002215;
+  --color-brand-secondary: #00A868;
+
+  /* ---------------------------------------------------------------------------
+     Colores Semánticos
+     --------------------------------------------------------------------------- */
+  --color-success: #198754;
+  --color-success-light: #D1E7DD;
+  --color-success-dark: #0F5132;
+
+  --color-warning: #FFC107;
+  --color-warning-light: #FFF3CD;
+  --color-warning-dark: #664D03;
+
+  --color-danger: #DC3545;
+  --color-danger-light: #F8D7DA;
+  --color-danger-dark: #842029;
+
+  --color-info: #0DCAF0;
+  --color-info-light: #CFF4FC;
+  --color-info-dark: #055160;
+
+  /* ---------------------------------------------------------------------------
+     Tema Claro - Fondos
+     --------------------------------------------------------------------------- */
+  --color-light-background: #FFFFFF;
+  --color-light-background-subtle: #F8F9FB;
+  --color-light-background-muted: #F1F3F5;
+  --color-light-background-emphasis: #E9ECEF;
+
+  /* Tema Claro - Texto */
+  --color-light-foreground: #212529;
+  --color-light-foreground-muted: #6C757D;
+  --color-light-foreground-subtle: #ADB5BD;
+
+  /* Tema Claro - Bordes */
+  --color-light-border: #DEE2E6;
+  --color-light-border-subtle: #E9ECEF;
+  --color-light-border-emphasis: #CED4DA;
+
+  /* Tema Claro - Superficies */
+  --color-light-surface-card: #FFFFFF;
+  --color-light-surface-popover: #FFFFFF;
+  --color-light-surface-modal: #FFFFFF;
+
+  /* ---------------------------------------------------------------------------
+     Tema Oscuro - Fondos
+     --------------------------------------------------------------------------- */
+  --color-dark-background: #1B1E23;
+  --color-dark-background-subtle: #212529;
+  --color-dark-background-muted: #2D3139;
+  --color-dark-background-emphasis: #343A40;
+
+  /* Tema Oscuro - Texto */
+  --color-dark-foreground: #ECECEC;
+  --color-dark-foreground-muted: #A0A0A0;
+  --color-dark-foreground-subtle: #6C757D;
+
+  /* Tema Oscuro - Bordes */
+  --color-dark-border: #495057;
+  --color-dark-border-subtle: #343A40;
+  --color-dark-border-emphasis: #6C757D;
+
+  /* Tema Oscuro - Superficies */
+  --color-dark-surface-card: #2D3139;
+  --color-dark-surface-popover: #343A40;
+  --color-dark-surface-modal: #2D3139;
+
+  /* ---------------------------------------------------------------------------
+     Colores de Construcción (EVM, HSE)
+     --------------------------------------------------------------------------- */
+  /* Semáforos EVM */
+  --color-evm-green: #198754;
+  --color-evm-yellow: #FFC107;
+  --color-evm-red: #DC3545;
+
+  /* Estados de Proyecto */
+  --color-project-planning: #6C757D;
+  --color-project-active: #0061A8;
+  --color-project-paused: #FFC107;
+  --color-project-completed: #198754;
+  --color-project-cancelled: #DC3545;
+
+  /* Prioridades HSE */
+  --color-hse-critical: #DC3545;
+  --color-hse-high: #FD7E14;
+  --color-hse-medium: #FFC107;
+  --color-hse-low: #198754;
+}
+
+/* =============================================================================
+   VARIABLES CONTEXTUALES (Tema Claro por defecto)
+   ============================================================================= */
+
+:root {
+  /* Colores primarios contextuales */
+  --color-primary: var(--color-brand-primary);
+  --color-primary-hover: var(--color-brand-primary-600);
+  --color-primary-light: var(--color-brand-primary-100);
+
+  --color-secondary: var(--color-brand-secondary);
+  --color-secondary-hover: var(--color-brand-secondary-600);
+  --color-secondary-light: var(--color-brand-secondary-100);
+
+  /* Fondos */
+  --color-background: var(--color-light-background);
+  --color-background-subtle: var(--color-light-background-subtle);
+  --color-background-muted: var(--color-light-background-muted);
+  --color-background-emphasis: var(--color-light-background-emphasis);
+
+  /* Texto */
+  --color-foreground: var(--color-light-foreground);
+  --color-foreground-muted: var(--color-light-foreground-muted);
+  --color-foreground-subtle: var(--color-light-foreground-subtle);
+
+  /* Bordes */
+  --color-border: var(--color-light-border);
+  --color-border-subtle: var(--color-light-border-subtle);
+  --color-border-emphasis: var(--color-light-border-emphasis);
+
+  /* Superficies */
+  --color-surface-card: var(--color-light-surface-card);
+  --color-surface-popover: var(--color-light-surface-popover);
+  --color-surface-modal: var(--color-light-surface-modal);
+}
+
+/* =============================================================================
+   TEMA OSCURO
+   ============================================================================= */
+
+.dark,
+[data-theme="dark"] {
+  --color-background: var(--color-dark-background);
+  --color-background-subtle: var(--color-dark-background-subtle);
+  --color-background-muted: var(--color-dark-background-muted);
+  --color-background-emphasis: var(--color-dark-background-emphasis);
+
+  --color-foreground: var(--color-dark-foreground);
+  --color-foreground-muted: var(--color-dark-foreground-muted);
+  --color-foreground-subtle: var(--color-dark-foreground-subtle);
+
+  --color-border: var(--color-dark-border);
+  --color-border-subtle: var(--color-dark-border-subtle);
+  --color-border-emphasis: var(--color-dark-border-emphasis);
+
+  --color-surface-card: var(--color-dark-surface-card);
+  --color-surface-popover: var(--color-dark-surface-popover);
+  --color-surface-modal: var(--color-dark-surface-modal);
+}
+
+/* Soporte para preferencia del sistema */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --color-background: var(--color-dark-background);
+    --color-background-subtle: var(--color-dark-background-subtle);
+    --color-background-muted: var(--color-dark-background-muted);
+    --color-background-emphasis: var(--color-dark-background-emphasis);
+
+    --color-foreground: var(--color-dark-foreground);
+    --color-foreground-muted: var(--color-dark-foreground-muted);
+    --color-foreground-subtle: var(--color-dark-foreground-subtle);
+
+    --color-border: var(--color-dark-border);
+    --color-border-subtle: var(--color-dark-border-subtle);
+    --color-border-emphasis: var(--color-dark-border-emphasis);
+
+    --color-surface-card: var(--color-dark-surface-card);
+    --color-surface-popover: var(--color-dark-surface-popover);
+    --color-surface-modal: var(--color-dark-surface-modal);
+  }
+}
+
+/* =============================================================================
+   TIPOGRAFÍA
+   ============================================================================= */
+
+:root {
+  /* Familias de fuentes */
+  --font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, monospace;
+
+  /* Tamaños de fuente */
+  --font-size-xs: 0.75rem;     /* 12px */
+  --font-size-sm: 0.875rem;    /* 14px */
+  --font-size-base: 1rem;      /* 16px */
+  --font-size-lg: 1.125rem;    /* 18px */
+  --font-size-xl: 1.25rem;     /* 20px */
+  --font-size-2xl: 1.5rem;     /* 24px */
+  --font-size-3xl: 1.875rem;   /* 30px */
+  --font-size-4xl: 2.25rem;    /* 36px */
+
+  /* Altura de línea */
+  --line-height-none: 1;
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+
+  /* Pesos de fuente */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  /* Espaciado de letras */
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+}
+
+/* =============================================================================
+   ESPACIADO
+   ============================================================================= */
+
+:root {
+  /* Sistema base 4px */
+  --spacing-px: 1px;
+  --spacing-0: 0;
+  --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 */
+  --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-12: 3rem;        /* 48px */
+  --spacing-14: 3.5rem;      /* 56px */
+  --spacing-16: 4rem;        /* 64px */
+  --spacing-20: 5rem;        /* 80px */
+  --spacing-24: 6rem;        /* 96px */
+}
+
+/* =============================================================================
+   BORDES
+   ============================================================================= */
+
+:root {
+  /* Radio de bordes */
+  --radius-none: 0;
+  --radius-sm: 0.125rem;     /* 2px */
+  --radius: 0.25rem;         /* 4px */
+  --radius-md: 0.375rem;     /* 6px */
+  --radius-lg: 0.5rem;       /* 8px */
+  --radius-xl: 0.75rem;      /* 12px */
+  --radius-2xl: 1rem;        /* 16px */
+  --radius-3xl: 1.5rem;      /* 24px */
+  --radius-full: 9999px;
+
+  /* Ancho de bordes */
+  --border-width-0: 0px;
+  --border-width: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+}
+
+/* =============================================================================
+   SOMBRAS
+   ============================================================================= */
+
+:root {
+  /* Sombras tema claro */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --shadow-none: 0 0 #0000;
+}
+
+.dark,
+[data-theme="dark"] {
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);
+  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.2);
+}
+
+/* =============================================================================
+   Z-INDEX
+   ============================================================================= */
+
+:root {
+  --z-0: 0;
+  --z-10: 10;
+  --z-20: 20;
+  --z-30: 30;
+  --z-40: 40;
+  --z-50: 50;
+
+  /* Semánticos */
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-fixed: 1030;
+  --z-modal-backdrop: 1040;
+  --z-modal: 1050;
+  --z-popover: 1060;
+  --z-tooltip: 1070;
+  --z-toast: 1080;
+}
+
+/* =============================================================================
+   ANIMACIÓN
+   ============================================================================= */
+
+:root {
+  /* Duraciones */
+  --duration-0: 0ms;
+  --duration-75: 75ms;
+  --duration-100: 100ms;
+  --duration-150: 150ms;
+  --duration-200: 200ms;
+  --duration-300: 300ms;
+  --duration-500: 500ms;
+  --duration-700: 700ms;
+  --duration-1000: 1000ms;
+
+  /* Curvas de easing */
+  --ease-linear: linear;
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Transiciones predefinidas */
+  --transition-none: none;
+  --transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-colors: color, background-color, border-color,
+    text-decoration-color, fill, stroke 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-opacity: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-shadow: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-transform: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* =============================================================================
+   COMPONENTES - TOKENS
+   ============================================================================= */
+
+:root {
+  /* Botones */
+  --button-padding-sm: 0.25rem 0.75rem;
+  --button-padding: 0.5rem 1rem;
+  --button-padding-lg: 0.75rem 1.5rem;
+  --button-font-size-sm: 0.875rem;
+  --button-font-size: 0.875rem;
+  --button-font-size-lg: 1rem;
+  --button-radius: var(--radius-md);
+  --button-min-height: 2.5rem;
+
+  /* Inputs */
+  --input-padding: 0.5rem 0.75rem;
+  --input-font-size: 0.875rem;
+  --input-radius: var(--radius-md);
+  --input-min-height: 2.5rem;
+  --input-focus-ring-width: 2px;
+  --input-focus-ring-color: var(--color-primary);
+  --input-focus-ring-offset: 2px;
+
+  /* Cards */
+  --card-padding-sm: 1rem;
+  --card-padding: 1.5rem;
+  --card-padding-lg: 2rem;
+  --card-radius: var(--radius-lg);
+  --card-shadow: var(--shadow-md);
+
+  /* Modales */
+  --modal-size-sm: 24rem;
+  --modal-size: 32rem;
+  --modal-size-lg: 48rem;
+  --modal-size-xl: 64rem;
+  --modal-radius: var(--radius-lg);
+  --modal-padding: 1.5rem;
+
+  /* Tablas */
+  --table-cell-padding: 0.75rem 1rem;
+  --table-header-bg: var(--color-background-muted);
+  --table-header-font-weight: 600;
+  --table-row-hover-bg: var(--color-background-emphasis);
+
+  /* Badges */
+  --badge-padding: 0.125rem 0.5rem;
+  --badge-font-size: 0.75rem;
+  --badge-radius: var(--radius-full);
+
+  /* Tooltips */
+  --tooltip-padding: 0.25rem 0.5rem;
+  --tooltip-font-size: 0.75rem;
+  --tooltip-radius: var(--radius);
+  --tooltip-bg: var(--color-dark-background);
+  --tooltip-color: var(--color-dark-foreground);
+}
+
+/* =============================================================================
+   FOCUS RING (Accesibilidad)
+   ============================================================================= */
+
+:root {
+  --ring-color: var(--color-primary);
+  --ring-offset-color: var(--color-background);
+  --ring-offset-width: 2px;
+  --ring-width: 2px;
+}
+
+/* Focus visible global */
+*:focus-visible {
+  outline: var(--ring-width) solid var(--ring-color);
+  outline-offset: var(--ring-offset-width);
+}
+
+/* Ocultar focus para mouse */
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+/* =============================================================================
+   REDUCCIÓN DE MOVIMIENTO (Accesibilidad)
+   ============================================================================= */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
new file mode 100644
index 0000000..a138d17
--- /dev/null
+++ b/web/tailwind.config.js
@@ -0,0 +1,168 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+  ],
+  darkMode: 'class', // Habilitar dark mode con clase
+  theme: {
+    extend: {
+      colors: {
+        // Colores de marca ISEM (via CSS variables para theming)
+        primary: {
+          50: 'var(--color-brand-primary-50)',
+          100: 'var(--color-brand-primary-100)',
+          200: 'var(--color-brand-primary-200)',
+          300: 'var(--color-brand-primary-300)',
+          400: 'var(--color-brand-primary-400)',
+          500: 'var(--color-brand-primary-500)',
+          600: 'var(--color-brand-primary-600)',
+          700: 'var(--color-brand-primary-700)',
+          800: 'var(--color-brand-primary-800)',
+          900: 'var(--color-brand-primary-900)',
+          DEFAULT: 'var(--color-primary)',
+        },
+        secondary: {
+          50: 'var(--color-brand-secondary-50)',
+          100: 'var(--color-brand-secondary-100)',
+          200: 'var(--color-brand-secondary-200)',
+          300: 'var(--color-brand-secondary-300)',
+          400: 'var(--color-brand-secondary-400)',
+          500: 'var(--color-brand-secondary-500)',
+          600: 'var(--color-brand-secondary-600)',
+          700: 'var(--color-brand-secondary-700)',
+          800: 'var(--color-brand-secondary-800)',
+          900: 'var(--color-brand-secondary-900)',
+          DEFAULT: 'var(--color-secondary)',
+        },
+        // Colores semánticos
+        success: {
+          light: 'var(--color-success-light)',
+          DEFAULT: 'var(--color-success)',
+          dark: 'var(--color-success-dark)',
+        },
+        warning: {
+          light: 'var(--color-warning-light)',
+          DEFAULT: 'var(--color-warning)',
+          dark: 'var(--color-warning-dark)',
+        },
+        danger: {
+          light: 'var(--color-danger-light)',
+          DEFAULT: 'var(--color-danger)',
+          dark: 'var(--color-danger-dark)',
+        },
+        info: {
+          light: 'var(--color-info-light)',
+          DEFAULT: 'var(--color-info)',
+          dark: 'var(--color-info-dark)',
+        },
+        // Colores contextuales (cambian con tema)
+        background: {
+          DEFAULT: 'var(--color-background)',
+          subtle: 'var(--color-background-subtle)',
+          muted: 'var(--color-background-muted)',
+          emphasis: 'var(--color-background-emphasis)',
+        },
+        foreground: {
+          DEFAULT: 'var(--color-foreground)',
+          muted: 'var(--color-foreground-muted)',
+          subtle: 'var(--color-foreground-subtle)',
+        },
+        border: {
+          DEFAULT: 'var(--color-border)',
+          subtle: 'var(--color-border-subtle)',
+          emphasis: 'var(--color-border-emphasis)',
+        },
+        surface: {
+          card: 'var(--color-surface-card)',
+          popover: 'var(--color-surface-popover)',
+          modal: 'var(--color-surface-modal)',
+        },
+        // Colores de construcción (EVM, HSE)
+        evm: {
+          green: 'var(--color-evm-green)',
+          yellow: 'var(--color-evm-yellow)',
+          red: 'var(--color-evm-red)',
+        },
+        project: {
+          planning: 'var(--color-project-planning)',
+          active: 'var(--color-project-active)',
+          paused: 'var(--color-project-paused)',
+          completed: 'var(--color-project-completed)',
+          cancelled: 'var(--color-project-cancelled)',
+        },
+        hse: {
+          critical: 'var(--color-hse-critical)',
+          high: 'var(--color-hse-high)',
+          medium: 'var(--color-hse-medium)',
+          low: 'var(--color-hse-low)',
+        },
+      },
+      fontFamily: {
+        sans: [
+          'Inter',
+          'system-ui',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'Segoe UI',
+          'Roboto',
+          'Helvetica Neue',
+          'Arial',
+          'sans-serif',
+        ],
+        mono: [
+          'JetBrains Mono',
+          'Fira Code',
+          'Consolas',
+          'Monaco',
+          'monospace',
+        ],
+      },
+      borderRadius: {
+        DEFAULT: 'var(--radius)',
+        sm: 'var(--radius-sm)',
+        md: 'var(--radius-md)',
+        lg: 'var(--radius-lg)',
+        xl: 'var(--radius-xl)',
+        '2xl': 'var(--radius-2xl)',
+        '3xl': 'var(--radius-3xl)',
+      },
+      boxShadow: {
+        sm: 'var(--shadow-sm)',
+        DEFAULT: 'var(--shadow)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+        xl: 'var(--shadow-xl)',
+        '2xl': 'var(--shadow-2xl)',
+        inner: 'var(--shadow-inner)',
+      },
+      zIndex: {
+        dropdown: 'var(--z-dropdown)',
+        sticky: 'var(--z-sticky)',
+        fixed: 'var(--z-fixed)',
+        'modal-backdrop': 'var(--z-modal-backdrop)',
+        modal: 'var(--z-modal)',
+        popover: 'var(--z-popover)',
+        tooltip: 'var(--z-tooltip)',
+        toast: 'var(--z-toast)',
+      },
+      transitionDuration: {
+        0: 'var(--duration-0)',
+        75: 'var(--duration-75)',
+        100: 'var(--duration-100)',
+        150: 'var(--duration-150)',
+        200: 'var(--duration-200)',
+        300: 'var(--duration-300)',
+        500: 'var(--duration-500)',
+        700: 'var(--duration-700)',
+        1000: 'var(--duration-1000)',
+      },
+      transitionTimingFunction: {
+        'ease-in': 'var(--ease-in)',
+        'ease-out': 'var(--ease-out)',
+        'ease-in-out': 'var(--ease-in-out)',
+      },
+    },
+  },
+  plugins: [],
+};