/* ==========================================================================
   Serraf Pós-Venda — Design Tokens
   ==========================================================================
   Paleta extraída do logo oficial (logo.png) por amostragem de pixels.
   Todos os pares de texto/fundo foram validados em WCAG 2.1 — mínimo AA.

   Cores de origem no logo (emblema circular, versão de 29/07/2026):
     #012BA7  boné do mascote      → PRIMÁRIA das ações
     #2CABFC  texto "PEDIDO"       → só sobre fundo escuro
     #011648  faixa do texto       → superfícies escuras
     #011B70  moletom do mascote
     #FDB904  estrelas             → avaliação
     #FDE751  brilho das estrelas
     #EB822C  tom de pele
     #1094FF  ícones da barra

   ⚠️ O azul do "PEDIDO" (#2CABFC) rende apenas 2.52:1 sobre branco — reprova
   em WCAG. Ele é lindo, mas só pode aparecer sobre fundo escuro. Para texto e
   botões em fundo claro usamos o azul do boné (#012BA7), que dá 11:1.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------
     MARCA — Azul (primária)
     --------------------------------------------------------------- */
  --mp-azul-50:  #E8F4FF;
  --mp-azul-100: #CDE8FF;
  --mp-azul-200: #9BD2FE;
  --mp-azul-300: #5FBCFD;
  --mp-azul-400: #2CABFC;   /* ★ texto "PEDIDO" — só sobre fundo escuro */
  --mp-azul-500: #1094FF;   /* ícones da barra do logo */
  --mp-azul-600: #0B54D6;
  --mp-azul-700: #012BA7;   /* ★ PRIMÁRIA — boné do mascote, 11:1 no branco */
  --mp-azul-800: #011B70;   /* moletom */
  --mp-azul-900: #011648;   /* faixa do texto */

  /* ---------------------------------------------------------------
     MARCA — Azul marinho (superfícies escuras e texto)
     --------------------------------------------------------------- */
  --mp-marinho-900: #000B25;
  --mp-marinho-800: #001039;
  --mp-marinho-700: #011648;  /* ★ faixa do logo — 17.4:1 no branco */
  --mp-marinho-600: #0A2560;
  --mp-marinho-500: #143676;

  /* ---------------------------------------------------------------
     MARCA — Dourado (as 5 estrelas do logo)
     --------------------------------------------------------------- */
  --mp-ambar-100: #FFF6DB;
  --mp-ambar-300: #FDE751;   /* brilho da estrela */
  --mp-ambar-400: #FDB904;   /* ★ estrela — 10:1 sobre o marinho */
  --mp-ambar-500: #EB822C;   /* tom de pele do mascote */
  --mp-ambar-700: #8A5300;   /* texto acessível sobre branco */

  /* ---------------------------------------------------------------
     NEUTROS (levemente azulados, para casar com a marca)
     --------------------------------------------------------------- */
  --mp-branco:     #FFFFFF;
  --mp-neutro-50:  #F7F9FC;   /* fundo do site — o logo agora é sobre branco */
  --mp-neutro-100: #EFF3F9;
  --mp-neutro-200: #DFE5EF;
  --mp-neutro-300: #C4CEDE;
  --mp-neutro-400: #94A2B8;
  --mp-neutro-500: #58687F;
  --mp-neutro-600: #43536E;
  --mp-neutro-700: #263954;
  --mp-neutro-900: #011648;

  /* ---------------------------------------------------------------
     SEMÂNTICAS
     --------------------------------------------------------------- */
  --mp-sucesso:        #0F7B4F;
  --mp-sucesso-fundo:  #E7F5EE;
  --mp-erro:           #B3261E;
  --mp-erro-fundo:     #FDECEA;
  --mp-aviso:          #8A5300;
  --mp-aviso-fundo:    #FFF4E0;
  --mp-info:           #012BA7;
  --mp-info-fundo:     #E8F4FF;

  /* ---------------------------------------------------------------
     CLASSIFICAÇÃO NPS
     --------------------------------------------------------------- */
  --mp-detrator:  #C62828;   /* nota 0–6  — texto branco por cima */
  --mp-neutro:    #FFB020;   /* nota 7–8  — texto marinho por cima */
  --mp-promotor:  #1B7F4B;   /* nota 9–10 — texto branco por cima */

  /* ---------------------------------------------------------------
     PAPÉIS SEMÂNTICOS (usar estes nos componentes, não os brutos)
     --------------------------------------------------------------- */
  /* A primária é o azul do boné (#012BA7): 11:1 sobre branco.
     O azul do texto "PEDIDO" é mais bonito, mas dá 2.52:1 e só serve
     sobre fundo escuro — está em --cor-marca-clara, abaixo. */
  --cor-primaria:          var(--mp-azul-700);
  --cor-primaria-hover:    var(--mp-azul-800);
  --cor-primaria-ativa:    var(--mp-azul-900);
  --cor-primaria-suave:    var(--mp-azul-50);

  /* Uso exclusivo sobre superfície escura */
  --cor-marca-clara:       var(--mp-azul-400);

  --cor-fundo:             var(--mp-neutro-50);
  --cor-superficie:        var(--mp-branco);
  --cor-superficie-escura: var(--mp-marinho-700);
  --cor-borda:             var(--mp-neutro-200);
  --cor-borda-forte:       var(--mp-neutro-300);

  --cor-texto:             var(--mp-marinho-700);
  --cor-texto-suave:       var(--mp-neutro-600);
  --cor-texto-fraco:       var(--mp-neutro-500);
  --cor-texto-invertido:   var(--mp-branco);

  --cor-foco:              var(--mp-azul-500);

  /* ---------------------------------------------------------------
     TIPOGRAFIA
     Sem webfont: a CSP bloqueia CDN e não há Composer/build.
     A pilha do sistema cobre o peso pesado do logo com 800.
     --------------------------------------------------------------- */
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fonte-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;

  --texto-xs:   0.75rem;    /* 12px */
  --texto-sm:   0.875rem;   /* 14px */
  --texto-base: 1rem;       /* 16px — nunca menor em campo de formulário (iOS dá zoom) */
  --texto-lg:   1.125rem;   /* 18px */
  --texto-xl:   1.375rem;   /* 22px */
  --texto-2xl:  1.75rem;    /* 28px */
  --texto-3xl:  2.25rem;    /* 36px */

  --peso-normal:  400;
  --peso-medio:   500;
  --peso-forte:   700;
  --peso-extra:   800;      /* títulos, como o logo */

  --altura-linha:        1.55;
  --altura-linha-titulo: 1.15;

  /* ---------------------------------------------------------------
     ESPAÇAMENTO (escala de 4px)
     --------------------------------------------------------------- */
  --esp-1:  0.25rem;
  --esp-2:  0.5rem;
  --esp-3:  0.75rem;
  --esp-4:  1rem;
  --esp-5:  1.25rem;
  --esp-6:  1.5rem;
  --esp-8:  2rem;
  --esp-10: 2.5rem;
  --esp-12: 3rem;
  --esp-16: 4rem;

  /* ---------------------------------------------------------------
     RAIO — o logo usa cantos bem arredondados
     --------------------------------------------------------------- */
  --raio-sm:   6px;
  --raio:      10px;
  --raio-md:   14px;
  --raio-lg:   20px;
  --raio-full: 999px;

  /* ---------------------------------------------------------------
     SOMBRAS (tingidas de marinho, não de preto puro)
     --------------------------------------------------------------- */
  --sombra-sm: 0 1px 2px rgba(11, 31, 62, 0.06);
  --sombra:    0 2px 8px rgba(11, 31, 62, 0.08);
  --sombra-md: 0 6px 20px rgba(11, 31, 62, 0.10);
  --sombra-lg: 0 12px 32px rgba(11, 31, 62, 0.14);
  --sombra-foco: 0 0 0 3px rgba(6, 99, 216, 0.35);

  /* ---------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------- */
  --largura-conteudo: 1120px;
  --largura-form:     460px;
  --altura-toque:     48px;   /* alvo mínimo de toque */

  --transicao: 160ms ease;
}

/* Respeita quem pediu menos movimento */
@media (prefers-reduced-motion: reduce) {
  :root { --transicao: 0ms; }
}