/**
 * css/tokens.css - Canonical Design Tokens for VCT Platform
 * ==========================================================
 * This is the SINGLE SOURCE OF TRUTH for all design tokens.
 * All components should reference these variables - no hardcoded hex values.
 * 
 * Source: ARGOS_COLORS_GUIDE.md (Official PANTONE values)
 * Version: 1.0 - Marzo 2026
 */

:root {
    /* ═══════════════════════════════════════════════════════════════
       PRIMARY PALETTE - Official PANTONE
       ═══════════════════════════════════════════════════════════════ */

    /* Primarios */
    --argos-lime: #c4d600; /* PANTONE 382C - Verde principal */
    --argos-lime-dark: #a5b800; /* Variante oscura lime */
    --argos-lime-pale: #f0e991; /* PANTONE 601C - Fondo lime claro */
    --argos-navy: #071d49; /* PANTONE 2768C - Azul principal */
    --argos-navy-light: #0f2d66; /* Variante clara navy */

    /* Alias para compatibilidad con otros sistemas */
    --argos-blue: var(--argos-navy);
    --argos-blue-light: var(--argos-navy-light);
    --argos-green: var(--argos-lime);
    --argos-green-dark: var(--argos-lime-dark);

    /* ═══════════════════════════════════════════════════════════════
       SPACING SCALE (4px base)
       ═══════════════════════════════════════════════════════════════ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ═══════════════════════════════════════════════════════════════
       FOCUS & INTERACTION TOKENS
       ═══════════════════════════════════════════════════════════════ */
    --focus-ring: 0 0 0 3px rgba(196, 214, 0, 0.45);
    --focus-ring-error: 0 0 0 3px rgba(206, 0, 55, 0.3);
    --touch-target: 44px;

    /* ═══════════════════════════════════════════════════════════════
       STATE COLORS - VCT Verification States
       ═══════════════════════════════════════════════════════════════ */
    --success: #00c389; /* PANTONE 3395C - Sin Desvío (OK) */
    --success-bg: #e8f5e9;
    --success-text: #ffffff;

    --danger: #ce0037; /* PANTONE 206C - Con Desvío (Error) */
    --danger-bg: #ffebee;
    --danger-text: #ffffff;

    --warning: #f0b323; /* PANTONE 7409C - Alerta */
    --warning-bg: #fff3e0;
    --warning-text: #1a202c;

    /* ═══════════════════════════════════════════════════════════════
       ZONE COLORS - GDO Tags
       ═══════════════════════════════════════════════════════════════ */
    --zone-cemento: #00a3e0; /* PANTONE 299C - Cyan */
    --zone-crudo: #6cc24a; /* PANTONE 360C - Verde lima */
    --zone-horno: #ff6a13; /* PANTONE 1585C - Naranja */
    --zone-empacadora: #8e24aa; /* PANTONE 266C - Violeta */
    --zone-mantenimiento: #546e7a; /* Cool Gray 425C - Gris acero */

    /* ═══════════════════════════════════════════════════════════════
       GRAYSCALE PALETTE - Warm & Cool Grays
       ═══════════════════════════════════════════════════════════════ */
    --gray-text: #796e65; /* PANTONE Warm Gray 10C - Texto principal */
    --gray-muted: #54585a; /* PANTONE 425C - Texto secundario */
    --gray-border: #d7d2cb; /* PANTONE Warm Gray 1C - Bordes */
    --gray-bg: #f0f2f6; /* Fondo general */

    /* Additional grays for UI */
    --gray-light: #aca39a; /* PANTONE Warm Gray 5C */
    --gray-dark: #8c8279; /* PANTONE Warm Gray 8C */

    /* ═══════════════════════════════════════════════════════════════
       UI SURFACES - Light Mode
       ═══════════════════════════════════════════════════════════════ */
    --bg-body: #f0f2f6;
    --bg-card: #ffffff;
    --text-main: #1a202c;
    --text-muted: #796e65;
    --border-color: #d7d2cb;

    /* ═══════════════════════════════════════════════════════════════
       DESIGN TOKENS - Shadows, Radii, Spacing
       ═══════════════════════════════════════════════════════════════ */
    --shadow-sm: 0 4px 12px rgba(7, 29, 73, 0.08);
    --shadow-md: 0 10px 30px rgba(7, 29, 73, 0.12);
    --shadow-lg: 0 20px 50px rgba(7, 29, 73, 0.18);
    --shadow-sheet: 0 -15px 40px rgba(7, 29, 73, 0.2);
    --shadow-lime: 0 8px 32px rgba(196, 214, 0, 0.35);

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 9999px;

    /* ═══════════════════════════════════════════════════════════════
       LAYOUT TOKENS
       ═══════════════════════════════════════════════════════════════ */
    --safe-bottom: env(safe-area-inset-bottom, 20px);
    --nav-height: 70px;

    /* ═══════════════════════════════════════════════════════════════
       TRANSITIONS & ANIMATION TOKENS
       ═══════════════════════════════════════════════════════════════ */
    --transition-theme: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;

    /* ─── Easing curves ─── */
    --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
    --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ─── Timing scale ─── */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 400ms;
    --duration-slower: 500ms;

    /* ═══════════════════════════════════════════════════════════════
       SKELETON LOADING
       ═══════════════════════════════════════════════════════════════ */
    --skeleton-base: #e2e8f0;
    --skeleton-shine: #f1f5f9;

    /* ═══════════════════════════════════════════════════════════════
       FORM VALIDATION
       ═══════════════════════════════════════════════════════════════ */
    --valid-color: #00c389;
    --valid-bg: #e8faf3;
    --valid-border: #00c389;
    --error-color: #ce0037;
    --error-bg: #fff0f3;
    --error-border: #ce0037;
}

/* ═══════════════════════════════════════════════════════════════
   SKELETON SHIMMER ANIMATION
   ═══════════════════════════════════════════════════════════════ */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shine) 50%, var(--skeleton-base) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
    pointer-events: none;
}
.skeleton-text { height: 14px; width: 100%; margin-bottom: 8px; }
.skeleton-text.short { width: 60%; }
.skeleton-text.tiny { width: 30%; height: 10px; }
.skeleton-card { height: 80px; border-radius: var(--radius-md); }
.skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-pill); }
.skeleton-badge { width: 60px; height: 22px; border-radius: var(--radius-pill); }

/* ═══════════════════════════════════════════════════════════════
   INLINE FORM VALIDATION
   ═══════════════════════════════════════════════════════════════ */
.form-error {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--error-color);
    margin-top: 6px;
    animation: slideDown 0.2s var(--ease-out);
}
.form-error.visible { display: flex; }
.form-error svg { flex-shrink: 0; }

.form-success {
    display: none;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--valid-color);
    margin-top: 6px;
    animation: slideDown 0.2s var(--ease-out);
}
.form-success.visible { display: flex; }

.input-field.error {
    border-color: var(--error-color) !important;
    background: var(--error-bg) !important;
    box-shadow: var(--focus-ring-error) !important;
}
.input-field.valid {
    border-color: var(--valid-color) !important;
    background: var(--valid-bg) !important;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE - Single consolidated block
   ═══════════════════════════════════════════════════════════════ */
[data-theme='dark'] {
    /* UI surfaces */
    --bg-body: #0d1117;
    --bg-card: #161b22;
    --text-main: #e6edf3;
    --text-muted: #8b949e;
    --border-color: #30363d;

    /* State backgrounds (darker variants) */
    --danger-bg: #3d1c1c;
    --warning-bg: #3d2a1a;
    --success-bg: #1c3d2a;

    /* Shadows (darker) */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);
    --shadow-sheet: 0 -15px 40px rgba(0, 0, 0, 0.5);
    --shadow-lime: 0 8px 32px rgba(196, 214, 0, 0.2);

    /* Primary colors (slightly muted for dark mode) */
    --argos-lime: #a5c24a;
    --argos-lime-dark: #7a9f22;
    --argos-lime-pale: #d9e79b;
    --argos-navy: #0e2a60;
    --argos-navy-light: #1f3b75;

    /* Zone colors (lighter for dark mode) */
    --zone-cemento: #38b8f2;
    --zone-crudo: #6bdc93;
    --zone-horno: #ff8c33;
    --zone-empacadora: #ab47bc;
    --zone-mantenimiento: #78909c;

    /* Grays (adjusted for dark mode) */
    --gray-text: #dde6f0;
    --gray-muted: #97a5b3;
    --gray-border: #2c3240;
    --gray-bg: #0a0d12;

    /* Skeleton (dark) */
    --skeleton-base: #1c2333;
    --skeleton-shine: #2a3344;

    /* Validation (dark) */
    --valid-bg: #1a2e28;
    --error-bg: #2a1a1c;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE - Component-specific overrides
   ═══════════════════════════════════════════════════════════════ */
[data-theme='dark'] .empty-state svg {
    stroke: var(--text-muted);
}
[data-theme='dark'] .sheet-header {
    background: var(--bg-card);
}
[data-theme='dark'] .sheet-header h2 {
    color: var(--text-main);
}
[data-theme='dark'] .vct-card:active {
    background: var(--bg-body);
}

[data-theme='dark'] .kpi-card.highlight {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    border: 1px solid var(--argos-lime-dark);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}
[data-theme='dark'] .login-card {
    background: rgba(22, 27, 34, 0.98);
    border-color: rgba(48, 54, 61, 0.8);
}
[data-theme='dark'] .input-field {
    background: var(--bg-body);
    border-color: var(--border-color);
    color: var(--text-main);
}
[data-theme='dark'] .input-field:focus {
    background: var(--bg-card);
    border-color: var(--argos-lime) !important;
    box-shadow: 0 0 0 4px rgba(196, 214, 0, 0.15);
}

[data-theme='dark'] .bottom-nav {
    background: rgba(22, 27, 34, 0.95);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border-color);
}

[data-theme='dark'] .nav-item {
    color: var(--text-muted);
}

[data-theme='dark'] .nav-item.active {
    color: var(--argos-lime);
}

[data-theme='dark'] .dash-hero::before {
    background: linear-gradient(135deg, rgba(7,29,73,0.95) 0%, rgba(7,29,73,0.85) 50%, rgba(196,214,0,0.1) 100%);
}

[data-theme='dark'] .kpi-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme='dark'] .accordion {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme='dark'] .accordion-header {
    background: rgba(196, 214, 0, 0.05);
    color: var(--argos-lime);
}

[data-theme='dark'] .area-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme='dark'] .area-card:hover {
    border-color: var(--argos-lime);
}

[data-theme='dark'] .search-container {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme='dark'] .btn-primary {
    background: var(--argos-lime);
    color: var(--argos-navy);
    box-shadow: 0 8px 24px rgba(196, 214, 0, 0.25);
}

[data-theme='dark'] .header-title {
    color: var(--argos-lime);
}

/* ─── Missing dark mode overrides (previously inlined in index.html) ─── */
[data-theme='dark'] .theme-toggle-btn {
    color: var(--text-main);
}
[data-theme='dark'] .vct-zone-badge {
    color: var(--text-muted);
}
[data-theme='dark'] .vct-type {
    background: var(--bg-body);
    color: var(--text-muted);
}
[data-theme='dark'] .vct-name {
    color: var(--text-main);
}
[data-theme='dark'] #loading-overlay {
    background: var(--bg-body);
}

/* ═══════════════════════════════════════════════════════════════
   LEGACY TOKENS (for originals/* files compatibility)
   DO NOT MODIFY - these ensure legacy files render correctly
   ═══════════════════════════════════════════════════════════════ */
:root {
    --navy: #071d49;
    --lime: #c4d600;
    --lime-dark: #9fad00;
    --lime-pale: #f2f6b0;
    --red: #c62828;
    --red-lite: #ffebee;
    --green: #008700;
    --green-lite: #e8f5e9;
    --blue-cemento: #525b68;
    --amber: #ff8000;
    --bg: #f0f2f6;
    --card: #ffffff;
    --muted: #254688;
    --border: #dde2ee;
    --shadow: 0 4px 24px rgba(7, 29, 73, 0.1);
    --radius: 12px;
    --touch: 48px;
    /* 404 page colors */
    --argos-lime: #c4d600;
    --argos-lime-dark: #a5b800;
    --argos-navy: #071d49;
    --argos-blue: #071d49;
}