/* ==========================================================================
   ALECRIM HOLDING — DESIGN TOKENS v1.0
   Fonte da verdade: DESIGN_SYSTEM.md
   Uso: importe este arquivo antes de qualquer outro CSS do projeto.
   ========================================================================== */

:root {
  /* Sem isto, num Mac no modo escuro o navegador pinta scrollbar, `select` e seletor de data
     de preto — e a tela sai metade clara, metade escura sem que nenhum CSS nosso explique. */
  color-scheme: light;

  /* ---------- COR: AZUL (primária) ---------- */
  --al-azul-50:  #F3F5FA;
  --al-azul-100: #E4EAF3;
  --al-azul-200: #C7D3E5;
  --al-azul-300: #A5B8D5;
  --al-azul-400: #7F99C2;
  --al-azul-500: #5979AE;
  --al-azul-600: #335A99;
  --al-azul-700: #00337F;  /* AZUL ALECRIM — cor da marca */
  --al-azul-800: #07285E;
  --al-azul-900: #0A2048;
  --al-azul-950: #0B1A36;

  /* ---------- COR: VERMELHO (acento) ---------- */
  --al-vermelho-50:  #FFF6F4;
  --al-vermelho-100: #FFEBE7;
  --al-vermelho-200: #FFD5CD;
  --al-vermelho-300: #FDB9AD;
  --al-vermelho-400: #F89787;
  --al-vermelho-500: #EE6C5A;
  --al-vermelho-600: #E13120;  /* VERMELHO ALECRIM — só grafismo/ícone ≥24px */
  --al-vermelho-550: #EC1C24;  /* o mesmo papel, sobre fundo escuro — é o vermelho do
                                  logotipo negativo oficial, medido no arquivo da marca */
  --al-vermelho-650: #CC2A1A;  /* botão sólido com texto branco (5.37:1) */
  --al-vermelho-700: #B5291A;  /* texto vermelho sobre branco (6.37:1) */
  --al-vermelho-800: #8F2115;
  --al-vermelho-900: #6E1A11;

  /* ---------- COR: AZUL ELÉTRICO (só símbolo/avatar) ---------- */
  --al-azul-eletrico: #001292;

  /* ---------- COR: NEUTROS (viés frio) ---------- */
  --al-neutro-0:   #FFFFFF;
  --al-neutro-50:  #F7FAFF;
  --al-neutro-100: #EFF3F9;
  --al-neutro-200: #E1E5ED;
  --al-neutro-300: #CDD1D9;
  --al-neutro-400: #ACB1BA;
  --al-neutro-500: #878C96;
  --al-neutro-600: #686D77;
  --al-neutro-700: #4C515A;
  --al-neutro-800: #33373E;
  --al-neutro-900: #1D2126;
  --al-neutro-950: #0E1115;

  /* ---------- COR: SEMÂNTICAS ---------- */
  --al-sucesso-50:  #ECFDF3;
  --al-sucesso-100: #D1FADF;
  --al-sucesso-600: #0E7C4A;
  --al-sucesso-700: #0A6039;

  --al-alerta-50:  #FFFAEB;
  --al-alerta-100: #FEF0C7;
  --al-alerta-600: #B45309;
  --al-alerta-700: #92400E;

  --al-info-50:  #EFF8FF;
  --al-info-100: #D1E9FF;
  --al-info-600: #0369A1;
  --al-info-700: #075985;

  --al-erro-50:  var(--al-vermelho-50);
  --al-erro-100: var(--al-vermelho-100);
  --al-erro-600: var(--al-vermelho-650);
  --al-erro-700: var(--al-vermelho-700);

  /* ---------- PAPÉIS SEMÂNTICOS (tema claro) ---------- */
  --al-fundo:            var(--al-neutro-50);
  --al-superficie:       var(--al-neutro-0);
  --al-superficie-alt:   var(--al-neutro-100);
  --al-borda:            var(--al-neutro-200);
  --al-borda-forte:      var(--al-neutro-300);
  --al-borda-campo:      var(--al-neutro-500);  /* 3.38:1 — limite de WCAG 1.4.11 */
  --al-placeholder:      var(--al-neutro-600);  /* 5.19:1 */
  --al-texto:            var(--al-neutro-900);
  --al-texto-secundario: var(--al-neutro-700);
  --al-texto-apoio:      var(--al-neutro-600);
  --al-texto-invertido:  var(--al-neutro-0);
  --al-primaria:         var(--al-azul-700);
  --al-primaria-hover:   var(--al-azul-800);
  --al-primaria-suave:   var(--al-azul-50);
  --al-acento:           var(--al-vermelho-600);
  --al-acento-acao:      var(--al-vermelho-650);
  --al-acento-texto:     var(--al-vermelho-700);
  /* Grafismo grande — traço da marca, barra de gráfico. No claro é o mesmo do logotipo. */
  --al-acento-grafismo:  var(--al-vermelho-600);

  /* ---------- TIPOGRAFIA ---------- */
  --al-fonte-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --al-fonte-texto:   'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --al-fonte-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --al-txt-display-1: 3.815rem; /* 61px */
  --al-txt-display-2: 3.052rem; /* 49px */
  --al-txt-titulo-1:  2.441rem; /* 39px */
  --al-txt-titulo-2:  1.953rem; /* 31px */
  --al-txt-titulo-3:  1.563rem; /* 25px */
  --al-txt-titulo-4:  1.25rem;  /* 20px */
  --al-txt-corpo-g:   1.125rem; /* 18px */
  --al-txt-corpo:     1rem;     /* 16px */
  --al-txt-corpo-p:   0.875rem; /* 14px */
  --al-txt-micro:     0.75rem;  /* 12px */

  --al-lh-apertado:   1.15;
  --al-lh-titulo:     1.25;
  --al-lh-normal:     1.5;
  --al-lh-leitura:    1.6;

  --al-peso-regular:  400;
  --al-peso-medio:    500;
  --al-peso-semi:     600;
  --al-peso-bold:     700;
  --al-peso-extra:    800;

  /* ---------- ESPAÇAMENTO (base 4px) ---------- */
  --al-esp-1:  0.25rem;  /* 4  */
  --al-esp-2:  0.5rem;   /* 8  */
  --al-esp-3:  0.75rem;  /* 12 */
  --al-esp-4:  1rem;     /* 16 */
  --al-esp-5:  1.25rem;  /* 20 */
  --al-esp-6:  1.5rem;   /* 24 */
  --al-esp-8:  2rem;     /* 32 */
  --al-esp-10: 2.5rem;   /* 40 */
  --al-esp-12: 3rem;     /* 48 */
  --al-esp-16: 4rem;     /* 64 */
  --al-esp-20: 5rem;     /* 80 */
  --al-esp-24: 6rem;     /* 96 */
  --al-esp-32: 8rem;     /* 128 */

  /* ---------- RAIO ---------- */
  --al-raio-sm:   4px;
  --al-raio-md:   8px;
  --al-raio-lg:   12px;
  --al-raio-xl:   20px;
  --al-raio-full: 9999px;

  /* ---------- SOMBRA (azulada) ---------- */
  --al-sombra-sm:   0 1px 2px rgba(0,51,127,.06), 0 1px 3px rgba(0,51,127,.08);
  --al-sombra-md:   0 4px 8px rgba(0,51,127,.06), 0 2px 4px rgba(0,51,127,.06);
  --al-sombra-lg:   0 12px 24px rgba(0,51,127,.10), 0 4px 8px rgba(0,51,127,.06);
  --al-sombra-xl:   0 24px 48px rgba(0,51,127,.14);
  --al-sombra-foco: 0 0 0 3px rgba(0,51,127,.28);

  /* ---------- LAYOUT ---------- */
  --al-largura-max:      1200px;
  --al-largura-leitura:  720px;
  --al-altura-header:    72px;
  --al-largura-sidebar:  260px;

  /* ---------- MOVIMENTO ---------- */
  --al-dur-rapida:  150ms;
  --al-dur-media:   250ms;
  --al-dur-lenta:   400ms;
  --al-easing:      cubic-bezier(0.2, 0, 0, 1);

  /* ---------- GRAFISMO ---------- */
  --al-barra-angulo: -40deg; /* = 50° a partir da horizontal */
}

/* ==========================================================================
   TEMA ESCURO
   Ative com <html data-tema="escuro"> ou deixe o media query decidir.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --al-fundo:            #070D18;
    --al-superficie:       #0E1729;
    --al-superficie-alt:   #16223A;
    --al-borda:            #23304C;
    --al-borda-forte:      #33436B;
    --al-borda-campo:      #55688F;
    --al-placeholder:      #8A96AC;
    --al-texto:            #EEF2F8;
    --al-texto-secundario: #A3AEC2;
    --al-texto-apoio:      #8A96AC;
    --al-texto-invertido:  #070D18;
    --al-primaria:         #8FB0E8;
    --al-primaria-hover:   #B0C8F0;
    --al-primaria-suave:   #16223A;
    --al-acento:           #FF6B54;
    --al-acento-acao:      #FF6B54;
    --al-acento-texto:     #FF8B76;
    /* Grafismo grande (barra, traço da marca) usa o vermelho do logotipo negativo; o
       #FF6B54 acima é para TEXTO e ação, onde #EC1C24 não teria contraste. */
    --al-acento-grafismo:  #EC1C24;
    --al-sombra-foco:      0 0 0 3px rgba(143,176,232,.35);
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;
  --al-fundo:            #070D18;
  --al-superficie:       #0E1729;
  --al-superficie-alt:   #16223A;
  --al-borda:            #23304C;
  --al-borda-forte:      #33436B;
  --al-borda-campo:      #55688F;
  --al-placeholder:      #8A96AC;
  --al-texto:            #EEF2F8;
  --al-texto-secundario: #A3AEC2;
  --al-texto-apoio:      #8A96AC;
  --al-texto-invertido:  #070D18;
  --al-primaria:         #8FB0E8;
  --al-primaria-hover:   #B0C8F0;
  --al-primaria-suave:   #16223A;
  --al-acento:           #FF6B54;
  --al-acento-acao:      #FF6B54;
  --al-acento-texto:     #FF8B76;
  --al-acento-grafismo:  #EC1C24;
  --al-sombra-foco:      0 0 0 3px rgba(143,176,232,.35);
}

/* ==========================================================================
   BASE — opcional, mas recomendada
   ========================================================================== */

body {
  background: var(--al-fundo);
  color: var(--al-texto);
  font-family: var(--al-fonte-texto);
  font-size: var(--al-txt-corpo);
  line-height: var(--al-lh-leitura);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--al-fonte-display);
  line-height: var(--al-lh-titulo);
  letter-spacing: -0.02em;
  color: var(--al-primaria);
}

:focus-visible {
  outline: none;
  box-shadow: var(--al-sombra-foco);
  border-radius: var(--al-raio-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}