/* ============================================
   DIREÇÃO DIGITAL - DESIGN TOKENS
   ============================================
   Baseado no Logo + Fluent Design (Microsoft 365)
   Mecânicas inspiradas no Tiny ERP
   ============================================ */

:root {
    /* ==========================================
       CORES DA MARCA - LOGO DIREÇÃO DIGITAL
       ========================================== */
    
    /* Primária - Verde (ações principais, sucesso) */
    --color-primary: #6DB33F;
    --color-primary-light: #8BC663;
    --color-primary-dark: #5A9634;
    --color-primary-50: rgba(109, 179, 63, 0.1);
    --color-primary-100: rgba(109, 179, 63, 0.2);
    
    /* Secundária - Azul (links, informações) */
    --color-secondary: #5B9BD5;
    --color-secondary-light: #7DB3E0;
    --color-secondary-dark: #4A85BC;
    --color-secondary-50: rgba(91, 155, 213, 0.1);
    --color-secondary-100: rgba(91, 155, 213, 0.2);
    
    /* Accent - Laranja (destaques, CTAs) */
    --color-accent: #ED7D31;
    --color-accent-light: #F19B5E;
    --color-accent-dark: #D46A21;
    --color-accent-50: rgba(237, 125, 49, 0.1);
    --color-accent-100: rgba(237, 125, 49, 0.2);
    
    /* Atenção - Amarelo (avisos, pendências) */
    --color-warning: #FFC000;
    --color-warning-light: #FFD24D;
    --color-warning-dark: #E6AD00;
    --color-warning-50: rgba(255, 192, 0, 0.1);
    --color-warning-100: rgba(255, 192, 0, 0.2);
    
    /* ==========================================
       CORES SEMÂNTICAS
       ========================================== */
    
    /* Sucesso */
    --color-success: #6DB33F;
    --color-success-light: #E8F5E0;
    --color-success-dark: #4A8029;
    
    /* Erro/Perigo */
    --color-danger: #DC3545;
    --color-danger-light: #FCEDEE;
    --color-danger-dark: #B02A37;
    
    /* Info */
    --color-info: #5B9BD5;
    --color-info-light: #E7F1FA;
    --color-info-dark: #3E7AB8;
    
    /* ==========================================
       ESCALA DE CINZAS (Fluent Design)
       ========================================== */
    --gray-50: #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-200: #EEEEEE;
    --gray-300: #E0E0E0;
    --gray-400: #BDBDBD;
    --gray-500: #9E9E9E;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;
    
    /* ==========================================
       TEMA CLARO (Light Mode)
       ========================================== */
    --bg-body: #F5F7FA;
    --bg-surface: #FFFFFF;
    --bg-surface-secondary: #FAFBFC;
    --bg-surface-elevated: #FFFFFF;
    
    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --text-tertiary: #999999;
    --text-placeholder: #BDBDBD;
    --text-inverse: #FFFFFF;
    
    --border-default: #E5E7EB;
    --border-light: #F0F0F0;
    --border-focus: var(--color-primary);
    
    /* ==========================================
       TIPOGRAFIA
       ========================================== */
    
    /* Família de Fontes */
    --font-primary: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
    --font-logo: 'Space Age', var(--font-primary);
    --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    
    /* Escala Tipográfica (Major Second - 1.125) */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    
    /* Pesos */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* ==========================================
       ESPAÇAMENTO (Escala de 4px)
       ========================================== */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    
    /* ==========================================
       BORDAS E RAIOS (Fluent Design)
       ========================================== */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* ==========================================
       SOMBRAS (Fluent Design - Suaves)
       ========================================== */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.12);
    --shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.16);
    
    /* Sombras Coloridas (para cards de destaque) */
    --shadow-primary: 0 4px 14px rgba(109, 179, 63, 0.25);
    --shadow-secondary: 0 4px 14px rgba(91, 155, 213, 0.25);
    --shadow-accent: 0 4px 14px rgba(237, 125, 49, 0.25);
    
    /* Sombra Interna (inputs focados) */
    --shadow-focus: 0 0 0 3px rgba(109, 179, 63, 0.2);
    --shadow-focus-danger: 0 0 0 3px rgba(220, 53, 69, 0.2);
    
    /* ==========================================
       TRANSIÇÕES E ANIMAÇÕES
       ========================================== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* ==========================================
       Z-INDEX SCALE
       ========================================== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-toast: 800;
    
    /* ==========================================
       BREAKPOINTS (para referência em @media)
       ========================================== */
    /* --bp-sm: 640px; */
    /* --bp-md: 768px; */
    /* --bp-lg: 1024px; */
    /* --bp-xl: 1280px; */
    /* --bp-2xl: 1536px; */
    
    /* ==========================================
       SIDEBAR (Específico da aplicação)
       ========================================== */
    --sidebar-width: 240px;
    --sidebar-width-collapsed: 64px;
    --sidebar-bg: #1A1D24;
    --sidebar-hover: #2A2E38;
    --sidebar-active: var(--color-primary);
    --sidebar-text: #E5E7EB;
    --sidebar-text-muted: #9CA3AF;
    
    /* ==========================================
       HEADER
       ========================================== */
    --header-height: 56px;
    --header-bg: var(--bg-surface);
}

/* ============================================
   TEMA ESCURO (Dark Mode)
   ============================================ */
[data-theme="dark"],
.dark-theme {
    /* Backgrounds */
    --bg-body: #0F0F0F;
    --bg-surface: #1A1A1A;
    --bg-surface-secondary: #242424;
    --bg-surface-elevated: #2A2A2A;
    
    /* Textos */
    --text-primary: #FFFFFF;
    --text-secondary: #A0A0A0;
    --text-tertiary: #707070;
    --text-placeholder: #505050;
    --text-inverse: #1A1A1A;
    
    /* Bordas */
    --border-default: #333333;
    --border-light: #2A2A2A;
    
    /* Sombras (mais sutis no dark mode) */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    
    /* Cores primárias ajustadas para dark mode */
    --color-primary-50: rgba(109, 179, 63, 0.15);
    --color-secondary-50: rgba(91, 155, 213, 0.15);
    --color-accent-50: rgba(237, 125, 49, 0.15);
    --color-warning-50: rgba(255, 192, 0, 0.15);
    
    /* Semânticas ajustadas */
    --color-success-light: rgba(109, 179, 63, 0.2);
    --color-danger-light: rgba(220, 53, 69, 0.2);
    --color-info-light: rgba(91, 155, 213, 0.2);
    
    /* Cinzas invertidos */
    --gray-50: #1A1A1A;
    --gray-100: #242424;
    --gray-200: #2A2A2A;
    --gray-300: #333333;
    --gray-400: #4A4A4A;
    --gray-500: #666666;
    --gray-600: #888888;
    --gray-700: #AAAAAA;
    --gray-800: #CCCCCC;
    --gray-900: #EEEEEE;
}

/* ============================================
   GRADIENTES (Inspirados no Logo)
   ============================================ */
:root {
    /* Gradientes da marca */
    --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-brand-reverse: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    --gradient-warm: linear-gradient(135deg, var(--color-accent) 0%, var(--color-warning) 100%);
    --gradient-full: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 50%, var(--color-accent) 100%);
    
    /* Gradientes de status/semânticos */
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-info: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    --gradient-muted: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    --gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    --gradient-teal: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    --gradient-cyan: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    
    /* Gradientes sutis para backgrounds */
    --gradient-surface: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-secondary) 100%);
    --gradient-hero: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%);
}

/* ============================================
   STATUS COLORS (Inspirado no Tiny ERP)
   ============================================ */
:root {
    /* Status de Pedidos/Processos */
    --status-pending: #FFC000;       /* Amarelo - Pendente */
    --status-approved: #6DB33F;      /* Verde - Aprovado */
    --status-processing: #5B9BD5;    /* Azul - Em processamento */
    --status-shipped: #9B59B6;       /* Roxo - Enviado */
    --status-delivered: #27AE60;     /* Verde escuro - Entregue */
    --status-cancelled: #DC3545;     /* Vermelho - Cancelado */
    --status-draft: #95A5A6;         /* Cinza - Rascunho */
    
    /* Badges de integração (como no Tiny) */
    --badge-ecommerce: #E74C3C;      /* E - E-commerce */
    --badge-carrier: #3498DB;        /* C - Transportadora */
    --badge-nfe: #2ECC71;            /* N - NFe */
    --badge-sync: #F39C12;           /* S - Sincronizado */
    --badge-invoice: #9B59B6;        /* I - Faturado */
    
    /* ==========================================
       WHATSAPP COLORS (Dark Theme - Default)
       ========================================== */
    --wa-bg-dark: #111b21;
    --wa-bg-header: #1f2c34;
    --wa-bg-chat: #0b141a;
    --wa-bg-input: #2a3942;
    --wa-bg-bubble-out: #005c4b;
    --wa-bg-bubble-in: #202c33;
    --wa-text-primary: #e9edef;
    --wa-text-secondary: #8696a0;
    --wa-text-muted: rgba(233, 237, 239, 0.6);
    --wa-accent: #00a884;
    --wa-link: #53bdeb;
    --wa-variable-bg: rgba(83, 189, 235, 0.25);
    --wa-variable-text: #7dd3fc;
    --wa-variable-border: rgba(83, 189, 235, 0.4);
    
    /* ==========================================
       WHATSAPP COLORS (Light Theme)
       ========================================== */
    --wa-light-bg: #ffffff;
    --wa-light-header: #008069;
    --wa-light-chat: #efeae2;
    --wa-light-input: #ffffff;
    --wa-light-bubble-out: #d9fdd3;
    --wa-light-bubble-in: #ffffff;
    --wa-light-text-primary: #111b21;
    --wa-light-text-secondary: #667781;
    --wa-light-text-muted: rgba(17, 27, 33, 0.6);
    --wa-light-border: #e9edef;
    --wa-light-variable-text: #0066cc;
}