erp-construccion-frontend-v2/web/tailwind.config.js

/** @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)',
      },
      animation: {
        shimmer: 'shimmer 1.5s infinite',
      },
      keyframes: {
        shimmer: {
          '0%': { backgroundPosition: '200% 0' },
          '100%': { backgroundPosition: '-200% 0' },
        },
      },
    },
  },
  plugins: [],
};