/*
 * ══════════════════════════════════════════════════════════════
 * MEVLOX DESIGN SYSTEM — Design Tokens v1.0
 * ══════════════════════════════════════════════════════════════
 *
 * Fonte única de verdade para TODAS as cores, espaçamentos,
 * tipografia e variáveis visuais do Grupo Mevlox.
 *
 * Consumido por: ERP, Portal, E-commerce, Chat, Landing Pages
 * ══════════════════════════════════════════════════════════════
 */

:root {
    /* ═══════════════════════════════════════════
     * BRAND — DNA do Grupo Mevlox
     * ═══════════════════════════════════════════ */

    /* Primary (Azul Marinho) — presente em TODOS os produtos */
    --mev-primary-50:  #F0F1F8;
    --mev-primary-100: #D8DAF0;
    --mev-primary-200: #B1B5E1;
    --mev-primary-300: #8A90D2;
    --mev-primary-400: #636BC3;
    --mev-primary-500: #182077;
    --mev-primary-600: #111860;
    --mev-primary-700: #0F1250;
    --mev-primary:     #182077;
    --mev-primary-dark: #111860;
    --mev-primary-light: #2535A0;

    /* Accent por Divisão */
    --mev-accent-tech:  #2563EB;   /* Mevlox Tecnologia — Electric Blue */
    --mev-accent-dc:    #059669;   /* Mevlox Datacenter — Emerald Fiber */
    --mev-accent-dist:  #97C120;   /* Mevlox Distribuidora — Lima Urbana */
    --mev-accent-grupo: #111827;   /* Grupo Mevlox — P&B */

    /* ═══════════════════════════════════════════
     * SEMÂNTICAS — Paleta Brasileira (únicas da Mevlox)
     * Inspiração: vegetação, argila, terra, pedra
     * ═══════════════════════════════════════════ */
    --mev-success-light: #E8EEE8;
    --mev-success:       #5F8060;  /* Verde Musgo */
    --mev-success-dark:  #3E5440;

    --mev-warning-light: #F5ECD9;
    --mev-warning:       #C89659;  /* Terracota Suave */
    --mev-warning-dark:  #8C6937;

    --mev-error-light:   #F1DDDD;
    --mev-error:         #A64040;  /* Ocre Queimado */
    --mev-error-dark:    #6E2A2A;

    --mev-info-light:    #E2E8EE;
    --mev-info:          #6B8299;  /* Azul Ardósia */
    --mev-info-dark:     #4A5A6B;

    /* ═══════════════════════════════════════════
     * NEUTRAS — Gray Scale
     * ═══════════════════════════════════════════ */
    --mev-gray-50:  #F9FAFB;
    --mev-gray-100: #F3F4F6;
    --mev-gray-200: #E5E7EB;
    --mev-gray-300: #D1D5DB;
    --mev-gray-400: #9CA3AF;
    --mev-gray-500: #6B7280;
    --mev-gray-600: #4B5563;
    --mev-gray-700: #374151;
    --mev-gray-800: #1F2937;
    --mev-gray-900: #111827;

    /* ═══════════════════════════════════════════
     * BACKGROUNDS
     * ═══════════════════════════════════════════ */
    --mev-bg-page:     #F0F1F8;
    --mev-bg-card:     #FFFFFF;
    --mev-bg-sidebar:  #FFFFFF;
    --mev-bg-hover:    #F3F4F6;
    --mev-bg-selected: #EEF2FF;
    --mev-bg-muted:    #F9FAFB;
    --mev-bg-dark:     #111827;
    --mev-bg-primary:  #182077;

    /* ═══════════════════════════════════════════
     * TEXTO
     * ═══════════════════════════════════════════ */
    --mev-text-primary:    #111827;
    --mev-text-secondary:  #6B7280;
    --mev-text-muted:      #9CA3AF;
    --mev-text-inverse:    #FFFFFF;
    --mev-text-link:       #2563EB;
    --mev-text-link-hover: #1D4ED8;
    --mev-text-success:    #3E5440;  /* Musgo escuro */
    --mev-text-warning:    #8C6937;  /* Terracota escura */
    --mev-text-error:      #6E2A2A;  /* Ocre escuro */
    --mev-text-info:       #4A5A6B;  /* Ardósia escura */

    /* ═══════════════════════════════════════════
     * BORDAS
     * ═══════════════════════════════════════════ */
    --mev-border:         #E5E7EB;
    --mev-border-hover:   #D1D5DB;
    --mev-border-focus:   #182077;
    --mev-border-error:   #A64040;  /* Ocre Queimado */
    --mev-border-success: #5F8060;  /* Verde Musgo */

    /* ═══════════════════════════════════════════
     * SOMBRAS
     * ═══════════════════════════════════════════ */
    --mev-shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --mev-shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --mev-shadow-md:  0 4px 12px -2px rgba(0, 0, 0, 0.08);
    --mev-shadow-lg:  0 8px 24px -4px rgba(0, 0, 0, 0.1);
    --mev-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* ═══════════════════════════════════════════
     * BORDER RADIUS — Escala Fibonacci (signature Mevlox)
     * Progressão não-linear: 5 → 9 → 14 → 22
     * ═══════════════════════════════════════════ */
    --mev-radius-sm:   5px;
    --mev-radius-md:   9px;
    --mev-radius-lg:   14px;
    --mev-radius-xl:   22px;
    --mev-radius-2xl:  36px;
    --mev-radius-full: 9999px;

    /* ═══════════════════════════════════════════
     * ESPAÇAMENTO (base 4px)
     * ═══════════════════════════════════════════ */
    --mev-space-0:   0;
    --mev-space-1:   4px;
    --mev-space-2:   8px;
    --mev-space-3:   12px;
    --mev-space-4:   16px;
    --mev-space-5:   20px;
    --mev-space-6:   24px;
    --mev-space-8:   32px;
    --mev-space-10:  40px;
    --mev-space-12:  48px;
    --mev-space-16:  64px;
    --mev-space-20:  80px;

    /* ═══════════════════════════════════════════
     * TIPOGRAFIA
     * ═══════════════════════════════════════════ */

    /* Fontes */
    --mev-font-logo:    'Anisette Std', sans-serif;          /* EXCLUSIVA do logotipo */
    --mev-font-brand:   'Poppins', sans-serif;               /* Marketing, papelaria */
    --mev-font-ui:      'Instrument Sans', system-ui, sans-serif; /* Interface digital */
    --mev-font-mono:    'JetBrains Mono', monospace;         /* Código */

    /* Tamanhos */
    --mev-text-xs:   0.75rem;    /* 12px */
    --mev-text-sm:   0.875rem;   /* 14px */
    --mev-text-base: 1rem;       /* 16px */
    --mev-text-lg:   1.125rem;   /* 18px */
    --mev-text-xl:   1.25rem;    /* 20px */
    --mev-text-2xl:  1.5rem;     /* 24px */
    --mev-text-3xl:  1.875rem;   /* 30px */
    --mev-text-4xl:  2.25rem;    /* 36px */

    /* Line Heights */
    --mev-leading-tight:  1.25;
    --mev-leading-normal: 1.5;
    --mev-leading-relaxed: 1.625;

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

    /* ═══════════════════════════════════════════
     * TRANSIÇÕES — Mevlox Ease (signature)
     * Desaceleração natural, sensação própria
     * ═══════════════════════════════════════════ */
    --mev-ease:              cubic-bezier(0.32, 0.72, 0.24, 1);
    --mev-transition-fast:   180ms var(--mev-ease);
    --mev-transition-normal: 240ms var(--mev-ease);
    --mev-transition-slow:   360ms var(--mev-ease);

    /* ═══════════════════════════════════════════
     * Z-INDEX
     * ═══════════════════════════════════════════ */
    --mev-z-dropdown:  10;
    --mev-z-sticky:    20;
    --mev-z-fixed:     30;
    --mev-z-overlay:   40;
    --mev-z-modal:     50;
    --mev-z-popover:   60;
    --mev-z-tooltip:   70;
    --mev-z-toast:     80;

    /* ═══════════════════════════════════════════
     * BREAKPOINTS (referência, não usa var() em media queries)
     * sm:  640px
     * md:  768px
     * lg:  1024px
     * xl:  1280px
     * 2xl: 1536px
     * ═══════════════════════════════════════════ */
}

/* ═══════════════════════════════════════════
 * DARK MODE — Inversão de tokens
 * ═══════════════════════════════════════════ */
.dark,
[data-theme="dark"] {
    --mev-bg-page:     #111827;
    --mev-bg-card:     #1F2937;
    --mev-bg-sidebar:  #111827;
    --mev-bg-hover:    #374151;
    --mev-bg-selected: #1E3A5F;
    --mev-bg-muted:    #1F2937;

    --mev-text-primary:    #F9FAFB;
    --mev-text-secondary:  #9CA3AF;
    --mev-text-muted:      #6B7280;
    --mev-text-link:       #60A5FA;
    --mev-text-link-hover: #93C5FD;

    --mev-border:       #374151;
    --mev-border-hover: #4B5563;
    --mev-border-focus: #2535A0;

    --mev-shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --mev-shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.3);
    --mev-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --mev-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.5);
}