/* =============================================================
 * MEVLOX DESIGN SYSTEM V5.4 SIGNATURE
 * Grupo Mevlox - https://ds.mevlox.app
 *
 * Este arquivo contem apenas TOKENS (CSS custom properties).
 * Os componentes visuais ficam em mevlox.css.
 *
 * Ordem de import:
 *   <link rel="stylesheet" href="css/design-system.css">
 *   <link rel="stylesheet" href="css/mevlox.css">
 * ============================================================= */

/* --------------------------------------------------------------
 * 0. Fontes oficiais
 *    - Poppins: marketing / headings
 *    - Instrument Sans: interface / body
 *    - JetBrains Mono: codigo / terminal
 *    - Anisette Std: EXCLUSIVA do logo (nunca carregada, o logo e imagem)
 * ------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

/* --------------------------------------------------------------
 * 1. TOKENS - LIGHT MODE (padrao)
 * ------------------------------------------------------------- */
:root {
  /* ---------- 1.1 Identidade de marca (DNA) ---------- */
  --mev-primary:         #182077;  /* Azul Marinho - DNA */
  --mev-primary-dark:    #111860;
  --mev-primary-light:   #2535A0;
  --mev-primary-50:      #F0F1F8;  /* tint muito claro */
  --mev-primary-100:     #E2E5F1;
  --mev-primary-200:     #C5CBE3;
  --mev-primary-300:     #8B99C9;
  --mev-primary-400:     #4F63B4;

  /* ---------- 1.2 Accents por divisao ----------
     Troque --mev-accent na root de cada site para personalizar
     - Grupo Mevlox       #111827  (P&B institucional)
     - Mevlox Tecnologia  #2563EB  (ISP / fibra)
     - Mevlox Datacenter  #059669  (servidores / cloud)
     - Mevlox Distribuidora #97C120 (varejo / distribuicao)
  */
  --mev-accent:          #97C120;   /* Distribuidora (este site) */
  --mev-accent-dark:     #7FA81A;
  --mev-accent-light:    #B4D94A;
  --mev-accent-50:       #F7FAEB;
  --mev-accent-100:      #EEF5D9;
  --mev-accent-200:      #DCE8B1;

  /* ---------- 1.3 Paleta brasileira (estados semanticos) ----------
     Unica do Mevlox - NAO usar #10B981 / #EF4444 / #F59E0B / #3B82F6 */
  --mev-success:         #5F8060;  /* Verde Musgo    - vegetacao brasileira */
  --mev-success-light:   #D7DFD7;
  --mev-success-dark:    #476048;

  --mev-warning:         #C89659;  /* Terracota      - argila, barro */
  --mev-warning-light:   #F2E4D2;
  --mev-warning-dark:    #A37A44;

  --mev-error:           #A64040;  /* Ocre Queimado  - terra queimada */
  --mev-error-light:     #EBC9C9;
  --mev-error-dark:      #7D3030;

  --mev-info:            #6B8299;  /* Azul Ardosia   - pedra, concreto */
  --mev-info-light:      #D6DEE6;
  --mev-info-dark:       #506171;

  /* ---------- 1.4 Neutros ---------- */
  --mev-text-primary:    #111827;
  --mev-text-secondary:  #4B5563;
  --mev-text-muted:      #9CA3AF;
  --mev-text-disabled:   #D1D5DB;

  --mev-bg-page:         #F0F1F8;  /* primary-50 - diferencial Mevlox */
  --mev-bg-card:         #FFFFFF;
  --mev-bg-subtle:       #F9FAFB;
  --mev-bg-muted:        #F3F4F6;
  --mev-bg-overlay:      rgba(17, 24, 39, 0.55);

  --mev-border:          #E5E7EB;
  --mev-border-hover:    #D1D5DB;
  --mev-border-focus:    var(--mev-primary);

  /* ---------- 1.5 Tipografia ---------- */
  --mev-font-heading:    'Poppins', system-ui, -apple-system, sans-serif;
  --mev-font-body:       'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mev-font-code:       'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Escala tipografica - base 16px */
  --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 */
  --mev-text-5xl:        3rem;        /* 48px */
  --mev-text-6xl:        3.75rem;     /* 60px */

  /* Line height */
  --mev-leading-tight:   1.2;
  --mev-leading-snug:    1.375;
  --mev-leading-normal:  1.5;
  --mev-leading-relaxed: 1.625;

  /* Letter spacing (signature) */
  --mev-tracking-tight:   -0.02em;    /* titulos >24px */
  --mev-tracking-normal:  0;          /* corpo */
  --mev-tracking-wide:    0.05em;     /* uppercase pequeno */

  /* ---------- 1.6 Border-radius Fibonacci (signature) ----------
     NUNCA usar 4/8/12/16 (isso e SaaS generico). */
  --mev-radius-sm:       5px;
  --mev-radius-md:       9px;
  --mev-radius-lg:       14px;
  --mev-radius-xl:       22px;
  --mev-radius-2xl:      36px;
  --mev-radius-full:     9999px;

  /* ---------- 1.7 Spacing (base 4) ---------- */
  --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;
  --mev-space-24:        96px;

  /* ---------- 1.8 Sombras (tingidas de primary) ---------- */
  --mev-shadow-xs:       0 1px 2px 0 rgba(24, 32, 119, 0.04);
  --mev-shadow-sm:       0 1px 2px 0 rgba(24, 32, 119, 0.05);
  --mev-shadow-md:       0 4px 12px -2px rgba(24, 32, 119, 0.08);
  --mev-shadow-lg:       0 10px 30px -8px rgba(24, 32, 119, 0.12);
  --mev-shadow-xl:       0 25px 50px -12px rgba(24, 32, 119, 0.18);
  --mev-shadow-focus:    0 0 0 3px rgba(24, 32, 119, 0.15);

  /* ---------- 1.9 Motion Signature ----------
     NUNCA usar ease-in-out generico. */
  --mev-ease:                 cubic-bezier(0.32, 0.72, 0.24, 1);
  --mev-ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
  --mev-ease-in:              cubic-bezier(0.7, 0, 0.84, 0);
  --mev-transition-fast:      180ms var(--mev-ease);
  --mev-transition-normal:    240ms var(--mev-ease);
  --mev-transition-slow:      360ms var(--mev-ease);

  /* ---------- 1.10 Z-index layers ---------- */
  --mev-z-base:          0;
  --mev-z-dropdown:      10;
  --mev-z-sticky:        20;
  --mev-z-overlay:       30;
  --mev-z-drawer:        40;
  --mev-z-modal:         50;
  --mev-z-toast:         60;
  --mev-z-tooltip:       70;

  /* ---------- 1.11 Layout ---------- */
  --mev-container-max:   1280px;
  --mev-container-pad:   20px;
  --mev-header-h:        64px;
  --mev-sidebar-w:       240px;
  --mev-sidebar-w-mini:  64px;
}

/* --------------------------------------------------------------
 * 2. TOKENS - DARK MODE
 *    Ativado via atributo [data-theme="dark"] no <html> ou <body>.
 *    Respeita prefers-color-scheme quando theme=auto.
 * ------------------------------------------------------------- */
:root[data-theme="dark"] {
  --mev-text-primary:    #F9FAFB;
  --mev-text-secondary:  #C7CBDD;
  --mev-text-muted:      #9CA3AF;
  --mev-text-disabled:   #4B5563;

  --mev-bg-page:         #0B1028;
  --mev-bg-card:         #182047;
  --mev-bg-subtle:       #151C41;
  --mev-bg-muted:        #1E2755;
  --mev-bg-overlay:      rgba(11, 16, 40, 0.75);

  --mev-border:          #232C5A;
  --mev-border-hover:    #2F3A77;

  --mev-primary-50:      rgba(37, 53, 160, 0.12);
  --mev-primary-100:     rgba(37, 53, 160, 0.20);

  --mev-success-light:   rgba(95, 128, 96, 0.20);
  --mev-warning-light:   rgba(200, 150, 89, 0.20);
  --mev-error-light:     rgba(166, 64, 64, 0.20);
  --mev-info-light:      rgba(107, 130, 153, 0.20);

  /* Sombras no dark ficam mais intensas para manter profundidade */
  --mev-shadow-sm:       0 1px 2px 0 rgba(0, 0, 0, 0.25);
  --mev-shadow-md:       0 4px 12px -2px rgba(0, 0, 0, 0.35);
  --mev-shadow-lg:       0 10px 30px -8px rgba(0, 0, 0, 0.5);
  --mev-shadow-xl:       0 25px 50px -12px rgba(0, 0, 0, 0.65);
}

/* Auto dark mode via prefers-color-scheme (quando theme=auto) */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --mev-text-primary:    #F9FAFB;
    --mev-text-secondary:  #C7CBDD;
    --mev-text-muted:      #9CA3AF;
    --mev-text-disabled:   #4B5563;

    --mev-bg-page:         #0B1028;
    --mev-bg-card:         #182047;
    --mev-bg-subtle:       #151C41;
    --mev-bg-muted:        #1E2755;
    --mev-bg-overlay:      rgba(11, 16, 40, 0.75);

    --mev-border:          #232C5A;
    --mev-border-hover:    #2F3A77;

    --mev-primary-50:      rgba(37, 53, 160, 0.12);
    --mev-primary-100:     rgba(37, 53, 160, 0.20);

    --mev-success-light:   rgba(95, 128, 96, 0.20);
    --mev-warning-light:   rgba(200, 150, 89, 0.20);
    --mev-error-light:     rgba(166, 64, 64, 0.20);
    --mev-info-light:      rgba(107, 130, 153, 0.20);

    --mev-shadow-sm:       0 1px 2px 0 rgba(0, 0, 0, 0.25);
    --mev-shadow-md:       0 4px 12px -2px rgba(0, 0, 0, 0.35);
    --mev-shadow-lg:       0 10px 30px -8px rgba(0, 0, 0, 0.5);
    --mev-shadow-xl:       0 25px 50px -12px rgba(0, 0, 0, 0.65);
  }
}

/* --------------------------------------------------------------
 * 3. Reset minimo + defaults base
 * ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--mev-font-body);
  font-size: var(--mev-text-base);
  line-height: var(--mev-leading-normal);
  color: var(--mev-text-primary);
  background: var(--mev-bg-page);
  transition: background-color var(--mev-transition-normal), color var(--mev-transition-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mev-font-heading);
  font-weight: 600;
  letter-spacing: var(--mev-tracking-tight);
  line-height: var(--mev-leading-tight);
  color: var(--mev-text-primary);
  margin: 0;
}

h1 { font-size: var(--mev-text-4xl); font-weight: 700; }
h2 { font-size: var(--mev-text-3xl); }
h3 { font-size: var(--mev-text-2xl); }
h4 { font-size: var(--mev-text-xl); }
h5 { font-size: var(--mev-text-lg); }
h6 { font-size: var(--mev-text-base); }

p, ul, ol { margin: 0; }

code, pre, kbd, samp {
  font-family: var(--mev-font-code);
  font-size: 0.9em;
}

pre {
  background: #111827;
  color: #E5E7EB;
  padding: var(--mev-space-4);
  border-radius: var(--mev-radius-md);
  overflow-x: auto;
}

a {
  color: var(--mev-primary);
  text-decoration: none;
  transition: color var(--mev-transition-fast);
}
a:hover { color: var(--mev-primary-dark); }

img, svg, video { display: block; max-width: 100%; }

hr {
  border: 0;
  height: 1px;
  background: var(--mev-border);
  margin: var(--mev-space-8) 0;
}

::selection {
  background: var(--mev-accent);
  color: var(--mev-primary);
}

/* Focus visible (acessibilidade WCAG) */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--mev-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Reduced motion - desabilita transitions e animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Atributo [hidden] respeitado mesmo quando elemento tem display:flex/block */
[hidden] { display: none !important; }