/**
 * DocFilling Design System - Design Tokens
 * FASE 8 - Basado en el logo DocFilling + Monday.com Vibe
 *
 * Este archivo contiene todos los tokens de diseño (variables CSS)
 * que deben usarse consistentemente en toda la aplicacion.
 */

:root {
    /* =========================================================================
       COLOR PALETTE - Basada en el logo DocFilling
       Logo: Azul (#2D8CCA) + Gris Oscuro (#3D4852)
       ========================================================================= */

    /* Primary Blue - Del logo DocFilling (pluma/Doc) */
    --color-primary-50: #E8F4FC;
    --color-primary-100: #C5E3F6;
    --color-primary-200: #9DD0F0;
    --color-primary-300: #6BB9E8;
    --color-primary-400: #42A5E0;
    --color-primary-500: #2D8CCA;  /* Color principal del logo */
    --color-primary-600: #2577AD;
    --color-primary-700: #1D6290;
    --color-primary-800: #154D73;
    --color-primary-900: #0D3856;

    /* Secondary - Azul mas oscuro para acentos */
    --color-secondary-500: #1E6091;
    --color-secondary-600: #184D74;
    --color-secondary-700: #123A57;

    /* Accent - Dorado para CTAs y menu de usuario */
    --color-accent-50: #FFF8E6;
    --color-accent-100: #FFECB3;
    --color-accent-200: #FFE082;
    --color-accent-300: #FFD54F;
    --color-accent-400: #FFCA28;
    --color-accent-500: #C7A45E;  /* Dorado del user menu */
    --color-accent-600: #B8923D;
    --color-accent-700: #A67F2C;

    /* Success */
    --color-success-50: #ECFDF5;
    --color-success-100: #D1FAE5;
    --color-success-200: #A7F3D0;
    --color-success-300: #6EE7B7;
    --color-success-400: #34D399;
    --color-success-500: #10B981;
    --color-success-600: #059669;
    --color-success-700: #047857;

    /* Warning */
    --color-warning-50: #FFFBEB;
    --color-warning-100: #FEF3C7;
    --color-warning-200: #FDE68A;
    --color-warning-300: #FCD34D;
    --color-warning-400: #FBBF24;
    --color-warning-500: #F59E0B;
    --color-warning-600: #D97706;
    --color-warning-700: #B45309;

    /* Error */
    --color-error-50: #FEF2F2;
    --color-error-100: #FEE2E2;
    --color-error-200: #FECACA;
    --color-error-300: #FCA5A5;
    --color-error-400: #F87171;
    --color-error-500: #EF4444;
    --color-error-600: #DC2626;
    --color-error-700: #B91C1C;

    /* Info */
    --color-info-50: #EFF6FF;
    --color-info-100: #DBEAFE;
    --color-info-200: #BFDBFE;
    --color-info-300: #93C5FD;
    --color-info-400: #60A5FA;
    --color-info-500: #3B82F6;
    --color-info-600: #2563EB;
    --color-info-700: #1D4ED8;

    /* Neutrals - Escala de grises moderna */
    --color-gray-25: #FCFCFD;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    --color-gray-950: #030712;

    /* =========================================================================
       SEMANTIC COLORS - Colores con significado contextual
       ========================================================================= */

    /* Surface Colors */
    --surface-primary: #FFFFFF;
    --surface-secondary: #F9FAFB;
    --surface-tertiary: #F3F4F6;
    --surface-elevated: #FFFFFF;
    --surface-overlay: rgba(0, 0, 0, 0.5);

    /* Text Colors */
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-tertiary: #6B7280;
    --text-disabled: #9CA3AF;
    --text-inverse: #FFFFFF;
    --text-link: var(--color-primary-500);
    --text-link-hover: var(--color-primary-700);

    /* Border Colors */
    --border-primary: #E5E7EB;
    --border-secondary: #D1D5DB;
    --border-focus: var(--color-primary-500);
    --border-error: var(--color-error-500);

    /* Interactive States */
    --interactive-hover: #F3F4F6;
    --interactive-active: #E5E7EB;
    --interactive-focus: rgba(59, 130, 246, 0.1);

    /* Button Backgrounds */
    --button-primary-bg: var(--color-primary-500);
    --button-primary-hover: var(--color-primary-600);
    --button-secondary-bg: #F3F4F6;
    --button-secondary-hover: #E5E7EB;
    --button-danger-bg: var(--color-error-500);
    --button-danger-hover: var(--color-error-600);
    --button-success-bg: var(--color-success-500);
    --button-success-hover: var(--color-success-600);

    /* Component Backgrounds */
    --navbar-bg: #1F2937;
    --sidebar-bg: var(--surface-secondary);
    --card-bg: var(--surface-primary);
    --modal-bg: var(--surface-primary);
    --dropdown-bg: var(--surface-primary);
    --table-header-bg: var(--surface-tertiary);
    --table-row-hover: var(--interactive-hover);

    /* Status Text Colors */
    --status-success: var(--color-success-600);
    --status-warning: var(--color-warning-600);
    --status-error: var(--color-error-600);
    --status-info: var(--color-primary-600);

    /* Badge/Tag Backgrounds */
    --badge-default-bg: #E5E7EB;
    --badge-default-text: #374151;
    --badge-success-bg: var(--color-success-100);
    --badge-success-text: var(--color-success-700);
    --badge-warning-bg: var(--color-warning-100);
    --badge-warning-text: var(--color-warning-700);
    --badge-error-bg: var(--color-error-100);
    --badge-error-text: var(--color-error-700);

    /* =========================================================================
       TYPOGRAPHY
       ========================================================================= */

    /* Font Families */
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    /* Font Sizes */
    --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 */

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* Letter Spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;

    /* Typography Semantic Tokens */
    /* Headings */
    --font-heading-1: var(--font-weight-bold) var(--font-size-4xl) / var(--line-height-tight) var(--font-family-sans);
    --font-heading-2: var(--font-weight-bold) var(--font-size-3xl) / var(--line-height-tight) var(--font-family-sans);
    --font-heading-3: var(--font-weight-semibold) var(--font-size-2xl) / var(--line-height-tight) var(--font-family-sans);
    --font-heading-4: var(--font-weight-semibold) var(--font-size-xl) / var(--line-height-tight) var(--font-family-sans);
    --font-heading-5: var(--font-weight-semibold) var(--font-size-lg) / var(--line-height-normal) var(--font-family-sans);
    --font-heading-6: var(--font-weight-semibold) var(--font-size-base) / var(--line-height-normal) var(--font-family-sans);

    /* Body Text */
    --font-body-lg: var(--font-weight-normal) var(--font-size-lg) / var(--line-height-relaxed) var(--font-family-sans);
    --font-body: var(--font-weight-normal) var(--font-size-base) / var(--line-height-normal) var(--font-family-sans);
    --font-body-sm: var(--font-weight-normal) var(--font-size-sm) / var(--line-height-normal) var(--font-family-sans);
    --font-body-xs: var(--font-weight-normal) var(--font-size-xs) / var(--line-height-normal) var(--font-family-sans);

    /* UI Elements */
    --font-button: var(--font-weight-medium) var(--font-size-sm) / 1 var(--font-family-sans);
    --font-label: var(--font-weight-medium) var(--font-size-sm) / var(--line-height-normal) var(--font-family-sans);
    --font-caption: var(--font-weight-normal) var(--font-size-xs) / var(--line-height-normal) var(--font-family-sans);
    --font-overline: var(--font-weight-semibold) var(--font-size-xs) / var(--line-height-normal) var(--font-family-sans);

    /* Code */
    --font-code: var(--font-weight-normal) var(--font-size-sm) / var(--line-height-normal) var(--font-family-mono);
    --font-code-block: var(--font-weight-normal) var(--font-size-sm) / var(--line-height-relaxed) var(--font-family-mono);

    /* Navigation */
    --font-nav-item: var(--font-weight-medium) var(--font-size-sm) / 1 var(--font-family-sans);
    --font-sidebar-item: var(--font-weight-normal) var(--font-size-sm) / var(--line-height-normal) var(--font-family-sans);

    /* Tables */
    --font-table-header: var(--font-weight-semibold) var(--font-size-xs) / var(--line-height-normal) var(--font-family-sans);
    --font-table-cell: var(--font-weight-normal) var(--font-size-sm) / var(--line-height-normal) var(--font-family-sans);

    /* Forms */
    --font-input: var(--font-weight-normal) var(--font-size-sm) / var(--line-height-normal) var(--font-family-sans);
    --font-input-label: var(--font-weight-medium) var(--font-size-sm) / var(--line-height-normal) var(--font-family-sans);
    --font-input-helper: var(--font-weight-normal) var(--font-size-xs) / var(--line-height-normal) var(--font-family-sans);

    /* =========================================================================
       SPACING
       ========================================================================= */

    --spacing-0: 0;
    --spacing-px: 1px;
    --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-11: 2.75rem;    /* 44px */
    --spacing-12: 3rem;       /* 48px */
    --spacing-14: 3.5rem;     /* 56px */
    --spacing-16: 4rem;       /* 64px */
    --spacing-20: 5rem;       /* 80px */
    --spacing-24: 6rem;       /* 96px */

    /* =========================================================================
       ICON SIZES
       ========================================================================= */

    --icon-size-2xs: 0.75rem;   /* 12px - tiny indicators */
    --icon-size-xs: 0.875rem;   /* 14px - inline with small text */
    --icon-size-sm: 1rem;       /* 16px - standard small icon */
    --icon-size-md: 1.25rem;    /* 20px - default icon size */
    --icon-size-lg: 1.5rem;     /* 24px - emphasized icons */
    --icon-size-xl: 2rem;       /* 32px - large icons */
    --icon-size-2xl: 3rem;      /* 48px - hero icons */
    --icon-size-3xl: 4rem;      /* 64px - feature icons */

    /* =========================================================================
       BORDERS & RADIUS
       ========================================================================= */

    /* Border Widths */
    --border-width-0: 0;
    --border-width-1: 1px;
    --border-width-2: 2px;
    --border-width-4: 4px;

    /* Border Radius - Monday.com style (8px base) */
    --radius-none: 0;
    --radius-sm: 0.25rem;     /* 4px */
    --radius-md: 0.5rem;      /* 8px - Default */
    --radius-lg: 0.75rem;     /* 12px */
    --radius-xl: 1rem;        /* 16px */
    --radius-2xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;

    /* =========================================================================
       SHADOWS - Estilo Monday.com (sutiles y elegantes)
       ========================================================================= */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

    /* Card shadows - Monday.com inspired */
    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);

    /* Focus ring */
    --shadow-focus: 0 0 0 3px var(--color-primary-100);
    --shadow-focus-error: 0 0 0 3px var(--color-error-100);

    /* =========================================================================
       TRANSITIONS
       ========================================================================= */

    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Specific transitions */
    --transition-colors: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
    --transition-transform: transform 200ms ease;
    --transition-opacity: opacity 200ms ease;
    --transition-shadow: box-shadow 200ms ease;
    --transition-all: all 200ms ease;

    /* =========================================================================
       Z-INDEX SCALE - Ajustada al patrón establecido en el codebase
       ========================================================================= */

    --z-base: 1;           /* Para layering dentro de componentes */
    --z-raised: 10;        /* Elementos ligeramente elevados */
    --z-dropdown: 100;     /* Dropdowns y popovers simples */
    --z-sticky: 200;       /* Sticky elements */
    --z-fixed: 1000;       /* Navbar y elementos fijos */
    --z-modal-backdrop: 1000;  /* Backdrop de modales */
    --z-popover: 1001;     /* Dropdowns que deben estar sobre navbar */
    --z-modal: 1100;       /* Contenido de modales */
    --z-tooltip: 1200;     /* Tooltips */
    --z-toast: 9999;       /* Notificaciones (máxima prioridad) */

    /* =========================================================================
       LAYOUT
       ========================================================================= */

    --navbar-height: 64px;
    --sidebar-width: 280px;
    --sidebar-collapsed: 64px;
    --container-max: 1400px;
    --content-max: 1200px;

    /* =========================================================================
       BREAKPOINTS (for reference - use in media queries)
       ========================================================================= */
    /*
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    */

    /* =========================================================================
       LEGACY COMPATIBILITY - Mapeo a variables existentes
       ========================================================================= */

    /* Brand tokens (legacy) */
    --brand-primary: var(--color-primary-500);
    --brand-primary-600: var(--color-primary-600);
    --brand-primary-700: var(--color-primary-700);
    --brand-accent: var(--color-accent-500);
    --brand-success: var(--color-success-500);
    --brand-warning: var(--color-warning-500);
    --brand-danger: var(--color-error-500);

    /* Surface (legacy) */
    --color-white: #FFFFFF;
    --color-bg: var(--surface-secondary);
    --color-surface: var(--surface-primary);
    --color-border: var(--border-primary);

    /* Chat/UI Legacy Variables - Map to semantic tokens */
    --bg-primary: var(--surface-primary);
    --bg-secondary: var(--surface-secondary);
    --bg-tertiary: var(--surface-tertiary);
    --primary-color: var(--color-primary-500);
    --primary-hover: var(--color-primary-600);
    --primary-rgb: 45, 140, 202; /* RGB of --color-primary-500 for rgba() */
    --border-color: var(--border-primary);
    --error-color: var(--color-error-500);
    --success-color: var(--color-success-500);
    --warning-color: var(--color-warning-500);
    --font-mono: var(--font-family-mono);
}

/* =========================================================================
   DARK THEME
   ========================================================================= */

[data-theme="dark"] {
    /* Surface Colors */
    --surface-primary: #1F2937;
    --surface-secondary: #111827;
    --surface-tertiary: #374151;
    --surface-elevated: #263344;
    --surface-overlay: rgba(0, 0, 0, 0.7);

    /* Text Colors */
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
    --text-tertiary: #9CA3AF;
    --text-disabled: #6B7280;
    --text-inverse: #111827;
    --text-link: #6BB9E8;
    --text-link-hover: #9DD0F0;

    /* Border Colors */
    --border-primary: #374151;
    --border-secondary: #4B5563;
    --border-focus: #42A5E0;

    /* Interactive States - Dark */
    --interactive-hover: #374151;
    --interactive-active: #4B5563;
    --interactive-focus: rgba(66, 165, 224, 0.2);

    /* Button Backgrounds - Dark */
    --button-primary-bg: var(--color-primary-500);
    --button-primary-hover: var(--color-primary-600);
    --button-secondary-bg: #374151;
    --button-secondary-hover: #4B5563;
    --button-danger-bg: #DC2626;
    --button-danger-hover: #EF4444;
    --button-success-bg: #059669;
    --button-success-hover: #10B981;

    /* Component Backgrounds - Dark */
    --navbar-bg: #0F172A;
    --sidebar-bg: var(--surface-primary);
    --card-bg: var(--surface-primary);
    --modal-bg: var(--surface-elevated);
    --dropdown-bg: var(--surface-elevated);
    --table-header-bg: var(--surface-tertiary);
    --table-row-hover: var(--interactive-hover);

    /* Status Text Colors - Dark (brighter for visibility) */
    --status-success: #34D399;
    --status-warning: #FBBF24;
    --status-error: #F87171;
    --status-info: #60A5FA;

    /* Badge/Tag Backgrounds - Dark */
    --badge-default-bg: #374151;
    --badge-default-text: #D1D5DB;
    --badge-success-bg: rgba(16, 185, 129, 0.2);
    --badge-success-text: #34D399;
    --badge-warning-bg: rgba(245, 158, 11, 0.2);
    --badge-warning-text: #FBBF24;
    --badge-error-bg: rgba(239, 68, 68, 0.2);
    --badge-error-text: #F87171;

    /* Adjusted primary for better contrast in dark mode */
    --color-primary-50: #1a3a52;
    --color-primary-100: #1d4a66;
    --color-primary-200: #225a7a;
    --color-primary-500: #42A5E0;
    --color-primary-600: #6BB9E8;

    /* Gray scale adjustments for dark mode */
    --color-gray-50: #1F2937;
    --color-gray-100: #374151;
    --color-gray-200: #4B5563;
    --color-gray-800: #E5E7EB;
    --color-gray-900: #F9FAFB;

    /* Shadows for dark mode - lighter opacity */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-focus: 0 0 0 3px rgba(66, 165, 224, 0.3);

    /* Legacy */
    --color-bg: var(--surface-secondary);
    --color-surface: var(--surface-primary);
    --color-border: var(--border-primary);
    --color-white: #1F2937;

    /* Chat/UI Legacy Variables - Dark mode */
    --bg-primary: var(--surface-primary);
    --bg-secondary: var(--surface-secondary);
    --bg-tertiary: var(--surface-tertiary);
    --primary-color: var(--color-primary-500);
    --primary-hover: var(--color-primary-600);
    --primary-rgb: 66, 165, 224; /* RGB of dark mode --color-primary-500 */
    --border-color: var(--border-primary);
    --error-color: #F87171;
    --success-color: #34D399;
    --warning-color: #FBBF24;
}

/* Apply dark theme when system prefers dark AND no explicit theme is set */
@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        /* Surface Colors */
        --surface-primary: #1F2937;
        --surface-secondary: #111827;
        --surface-tertiary: #374151;
        --surface-elevated: #263344;
        --surface-overlay: rgba(0, 0, 0, 0.7);

        /* Text Colors */
        --text-primary: #F9FAFB;
        --text-secondary: #D1D5DB;
        --text-tertiary: #9CA3AF;
        --text-disabled: #6B7280;
        --text-inverse: #111827;
        --text-link: #6BB9E8;
        --text-link-hover: #9DD0F0;

        /* Border Colors */
        --border-primary: #374151;
        --border-secondary: #4B5563;
        --border-focus: #42A5E0;

        /* Adjusted primary for better contrast */
        --color-primary-50: #1a3a52;
        --color-primary-100: #1d4a66;
        --color-primary-200: #225a7a;
        --color-primary-500: #42A5E0;
        --color-primary-600: #6BB9E8;

        /* Gray scale adjustments */
        --color-gray-50: #1F2937;
        --color-gray-100: #374151;
        --color-gray-200: #4B5563;
        --color-gray-800: #E5E7EB;
        --color-gray-900: #F9FAFB;

        /* Shadows */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
        --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
        --shadow-focus: 0 0 0 3px rgba(66, 165, 224, 0.3);

        /* Legacy */
        --color-bg: var(--surface-secondary);
        --color-surface: var(--surface-primary);
        --color-border: var(--border-primary);
        --color-white: #1F2937;

        /* Chat/UI Legacy Variables - Dark mode (auto) */
        --bg-primary: var(--surface-primary);
        --bg-secondary: var(--surface-secondary);
        --bg-tertiary: var(--surface-tertiary);
        --primary-color: var(--color-primary-500);
        --primary-hover: var(--color-primary-600);
        --primary-rgb: 66, 165, 224;
        --border-color: var(--border-primary);
        --error-color: #F87171;
        --success-color: #34D399;
        --warning-color: #FBBF24;
    }
}