/* ==========================================================================
   Martinauto — Design Tokens (v0.2)
   Fonte única de verdade da identidade visual dos 4 sistemas:
   Intranet (HUB) · Leads · Sales · Gestão de Requisições

   Estética: FLAT por defeito em todos os ecrãs de trabalho (superfície branca,
   borda 1px, sombra discreta). "Vidro" (translúcido + blur) e o gradiente da
   marca ficam RESERVADOS a superfícies decorativas do HUB — hero do dashboard
   e cartão de login. Nunca em grelha densa, formulário longo ou botão padrão.

   Uso:
   - HUB (CSS vanilla):        @import "martinauto-tokens.css";  → usar var(--ma-*)
   - Leads/Sales (Bootstrap):  carregar depois do app.css + camada martinauto-theme.css
   - Requisições (Tailwind):   espelhar no @theme + override --bs-* do Bootstrap CDN

   Derivado do :root da Intranet (styles.css) + public/css/app.css do Requisições.
   Prefixo --ma-  = Martinauto.
   ========================================================================== */

/* Fontes — remover este @import se a app servir as fontes localmente.
   Montserrat: UI, títulos, labels.  JetBrains Mono: só colunas numéricas,
   códigos, IDs e valores monetários (alinhamento monoespaçado). */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---- Marca -------------------------------------------------------------- */
  --ma-color-brand:        #019ee4;   /* azul Martinauto — ação primária */
  --ma-color-brand-strong: #0076ab;   /* hover, fim de gradiente, texto de eyebrow */
  --ma-color-brand-weak:   #e8f6fd;   /* fundo de destaque suave / estado ativo */
  --ma-color-brand-rgb:    1 158 228; /* p/ rgb(var(--ma-color-brand-rgb) / .12) */

  /* ---- Texto ------------------------------------------------------------- */
  --ma-color-ink:          #142033;   /* texto principal */
  --ma-color-text-muted:   #64748b;   /* texto secundário */
  --ma-color-text-subtle:  #8a98aa;   /* legendas, metadados */
  --ma-color-text-on-brand:#ffffff;

  /* ---- Superfícies (flat, padrão) ------------------------------------------ */
  --ma-color-bg:            #f4f7fb;  /* fundo da aplicação */
  --ma-color-surface:       #ffffff;  /* cards, painéis, barras */
  --ma-color-surface-sunken:#f1f5f9;  /* inputs, zebra de tabela, áreas recuadas */

  /* ---- Linhas ---------------------------------------------------------------- */
  --ma-color-border:        #e6e8ec;  /* borda padrão */
  --ma-color-border-strong: #cfd6df;  /* borda de campo em foco/hover */
  --ma-color-hairline:      rgba(15, 23, 38, 0.08);

  /* ---- Semânticas (cor de estado — separada do accent) ------------------- */
  --ma-color-success:       #0f9f6e;
  --ma-color-success-weak:  #e5f5ef;
  --ma-color-warning:       #f59e0b;
  --ma-color-warning-weak:  #fdf1dc;
  --ma-color-danger:        #d14b63;
  --ma-color-danger-weak:   #fbe9ec;
  --ma-color-info:          #019ee4;
  --ma-color-info-weak:     #e8f6fd;

  /* ---- Superfície "vidro" (RESERVADA a superfícies decorativas do HUB:
          slider do dashboard, cartão de login. NÃO usar em grelha densa.) --- */
  --ma-glass-surface: rgba(255, 255, 255, 0.82);
  --ma-glass-border:  rgba(255, 255, 255, 0.62);
  --ma-glass-blur:    18px;

  /* ---- Tipografia ------------------------------------------------------------ */
  --ma-font-sans: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ma-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Consolas", monospace;

  --ma-text-xs:   0.75rem;   /* 12 — legendas, badges */
  --ma-text-sm:   0.8125rem; /* 13 — texto denso, células de tabela */
  --ma-text-base: 0.9375rem; /* 15 — corpo padrão */
  --ma-text-lg:   1.125rem;  /* 18 — subtítulo */
  --ma-text-xl:   1.5rem;    /* 24 — h3 / título de secção */
  --ma-text-2xl:  2rem;      /* 32 — h2 */
  --ma-text-3xl:  2.75rem;   /* 44 — h1 / display */

  --ma-leading-tight: 1.15;
  --ma-leading-snug:  1.35;
  --ma-leading-normal:1.6;

  --ma-weight-regular:  400;
  --ma-weight-medium:   500;
  --ma-weight-semibold: 600;
  --ma-weight-bold:     700;

  --ma-tracking-tight: -0.02em;  /* títulos */
  --ma-tracking-label:  0.16em;  /* eyebrow / labels em maiúsculas */

  /* ---- Espaçamento (base 4) ---------------------------------------------- */
  --ma-space-1: 0.25rem; /*  4 */
  --ma-space-2: 0.5rem;  /*  8 */
  --ma-space-3: 0.75rem; /* 12 */
  --ma-space-4: 1rem;    /* 16 */
  --ma-space-5: 1.25rem; /* 20 */
  --ma-space-6: 1.5rem;  /* 24 */
  --ma-space-8: 2rem;    /* 32 */
  --ma-space-10:2.5rem;  /* 40 */

  /* ---- Raio ------------------------------------------------------------------ */
  --ma-radius-sm: 8px;    /* inputs, badges, botões pequenos */
  --ma-radius-md: 12px;   /* botões, cards padrão */
  --ma-radius-lg: 16px;   /* painéis, modais */
  --ma-radius-xl: 24px;   /* superfícies decorativas do HUB */
  --ma-radius-pill: 999px;

  /* ---- Sombra (suave, pouca opacidade) --------------------------------------- */
  --ma-shadow-sm: 0 1px 2px rgba(16, 20, 26, 0.06), 0 1px 1px rgba(16, 20, 26, 0.04);
  --ma-shadow-md: 0 6px 20px rgba(15, 23, 38, 0.08);
  --ma-shadow-lg: 0 22px 55px rgba(15, 23, 38, 0.10);
  --ma-shadow-brand: 0 12px 26px rgba(1, 158, 228, 0.22); /* realce do CTA no HERO do HUB — NÃO no botão padrão */

  /* ---- Gradiente da marca — HERO / cabeçalho do HUB apenas -------------------
     O botão primário padrão é FLAT (preenchimento sólido --ma-color-brand). */
  --ma-gradient-brand: linear-gradient(135deg, #019ee4 0%, #007ec0 100%);

  /* ---- Movimento ----------------------------------------------------------- */
  --ma-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ma-duration: 180ms;
}

/* Modo escuro — OPCIONAL. Ainda não adotado pelas apps; deixado pronto para
   quando/se entrar no escopo. Só troca os tokens, nada de regras de componente. */
@media (prefers-color-scheme: dark) {
  :root[data-ma-theme="auto"],
  :root[data-ma-theme="dark"] {
    --ma-color-ink:           #e8edf4;
    --ma-color-text-muted:    #9aa7b8;
    --ma-color-text-subtle:   #6b7888;
    --ma-color-bg:            #0f141b;
    --ma-color-surface:       #161d27;
    --ma-color-surface-sunken:#1c2530;
    --ma-color-border:        #263041;
    --ma-color-border-strong: #33405422;
    --ma-color-hairline:      rgba(255, 255, 255, 0.08);
    --ma-color-brand-weak:    rgba(1, 158, 228, 0.14);
    --ma-glass-surface:       rgba(22, 29, 39, 0.72);
    --ma-glass-border:        rgba(255, 255, 255, 0.10);
    --ma-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ma-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
    --ma-shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.55);
  }
}

/* Dark mode manual (toggle) — incondicional, para funcionar mesmo com OS claro.
   Valores iguais ao bloco @media acima. */
:root[data-ma-theme="dark"] {
  --ma-color-ink:            #e8edf4;
  --ma-color-text-muted:     #9aa7b8;
  --ma-color-text-subtle:    #6b7888;
  --ma-color-text-on-brand:  #ffffff;
  --ma-color-bg:             #0f141b;
  --ma-color-surface:        #161d27;
  --ma-color-surface-sunken: #1c2530;
  --ma-color-border:         #263041;
  --ma-color-border-strong:  #3a4763;
  --ma-color-hairline:       rgba(255, 255, 255, 0.08);
  --ma-color-brand-weak:     rgba(1, 158, 228, 0.16);
  --ma-color-success-weak:   rgba(15, 159, 110, 0.18);
  --ma-color-warning-weak:   rgba(245, 158, 11, 0.18);
  --ma-color-danger-weak:    rgba(209, 75, 99, 0.20);
  --ma-color-info-weak:      rgba(1, 158, 228, 0.16);
  --ma-glass-surface:        rgba(22, 29, 39, 0.72);
  --ma-glass-border:         rgba(255, 255, 255, 0.10);
  --ma-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --ma-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --ma-shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}