/* ============================================================
   DESIGN SYSTEM MO — cores
   FONTE ÚNICA. Edite aqui; nunca na cópia em <app>/public/ds/.
   Documentação e plano de migração: docs/design-system-mo.md
   Sincronização: ds/sincronizar-ds.ps1
   ------------------------------------------------------------
   ORIGEM: o design system da Moderna feito no Claude Design
   (claude.ai/design), projeto "Site da Moderna". O bundle de
   handoff está em:
       C:\Pastas Claude\site-moderna\design-handoff\site-da-moderna\
   e o bloco de tokens original é `project/styles.css`, linhas
   287–340. Os valores da seção MARCA abaixo são cópia verbatim
   dele — não foram reinterpretados.

   O `gelateria-moderna-site/src/app/styles/base.css` é a
   implementação fiel desse bloco. Ele NÃO é desvio: é o app que
   está mais perto da fonte.

   O que este arquivo ACRESCENTA ao bundle está marcado como
   DERIVADO, e cada item traz o motivo — o design system foi
   desenhado para um site, e app de gestão precisa de coisas que
   um site não tem: cor de erro, de aviso, de pendência.
   Contrastes conferidos pela WCAG 2.1 sobre o papel #FAF6EC.
   ============================================================ */

:root {
  /* ── MARCA — verbatim do Claude Design ─────────────────────*/
  --mo-red:        #C8242C;  /* ação primária, urgência · 5.20:1 AA */
  --mo-red-deep:   #9F1A21;  /* hover, gradiente, tinta de erro · 7.36:1 AAA */
  --mo-cream:      #F4EFE2;  /* superfície quente, zebra, chip */
  --mo-cream-deep: #E9DFC5;  /* FUNDO — borda, divisor, trilha de barra */
  --mo-green:      #B5C97A;  /* FUNDO · 1.68:1, reprova como texto */
  --mo-green-deep: #7E9447;  /* ícone, borda, texto ≥24px · 3.13:1 */
  --mo-brown:      #6B3F2A;  /* texto de apoio · 8.21:1 AAA */
  --mo-brown-soft: #A56C4A;  /* UI e texto ≥24px · 4.02:1 */
  --mo-ink:        #2A1812;  /* tinta · 15.72:1 AAA */
  --mo-paper:      #FAF6EC;  /* fundo do app */
  --mo-paper-warm: #F1E9D2;  /* seção alternada */

  /* ── SUB-MARCA MODERNA AÇAÍ — verbatim do Claude Design ────
     No bundle ela é "uma marca dentro da marca": ao entrar, tudo
     muda de cor e de clima. Ativa por .theme-acai. */
  --ac-magenta:      #C535D4;
  --ac-magenta-deep: #8B1E96;
  --ac-lime:         #B8D838;
  --ac-lime-deep:    #8AA82A;
  --ac-black:        #14130F;
  --ac-paper:        #FBF7F1;

  /* ── DERIVADO — branco ─────────────────────────────────────
     O bundle usa `white` literal em cartão, formulário e chip.
     Vira token para que o white label possa trocar a superfície. */
  --mo-white: #FFFFFF;

  /* ── DERIVADO — estado ─────────────────────────────────────
     O design system é de site: tem cor de marca, não tem cor de
     erro, de aviso nem de pendência. App de gestão tem. Estas
     são de SIGNIFICADO, não de identidade: não são temáveis por
     cliente, porque trocá-las quebra a leitura da tela.
     Cada estado é um trio texto/fundo/borda — foi a falta desse
     trio que fez CDG, Manutenção e Produção inventarem cada um o
     seu. Todo texto passa AA sobre o papel E sobre o branco.
     O erro reusa o --mo-red-deep da marca, de propósito. */
  --st-ok-texto:      #5E7033;  --st-ok-fundo:      #E7EFD8;  --st-ok-borda:      #B9CE8E;
  --st-atencao-texto: #8A5A10;  --st-atencao-fundo: #F8EFD8;  --st-atencao-borda: #DEC086;
  --st-erro-texto:    #9F1A21;  --st-erro-fundo:    #FBE8E6;  --st-erro-borda:    #E4A9A4;
  --st-info-texto:    #2C5AA0;  --st-info-fundo:    #E3EDF6;  --st-info-borda:    #A9C4DE;
  --st-neutro-texto:  #6B655A;  --st-neutro-fundo:  #EFEBE3;  --st-neutro-borda:  #D6CFC2;

  --mo-amber: #E8A317;  /* DERIVADO · FUNDO — ponto de semáforo; nunca texto */

  /* ── CAMADA SEMÂNTICA ──────────────────────────────────────
     O bundle já tinha --t-fg/--t-bg/--t-accent/--t-accent-2 e os
     trocava por página (é assim que o tema Açaí funciona lá).
     Os três de baixo são DERIVADOS: app de gestão tem cartão,
     borda e texto secundário, que o site resolvia no componente.
     É por AQUI que componente lê cor — nunca em --mo-*. */
  --t-fg:         var(--mo-ink);
  --t-bg:         var(--mo-paper);
  --t-accent:     var(--mo-red);
  --t-accent-2:   var(--mo-green);
  --t-superficie: var(--mo-white);      /* derivado */
  --t-borda:      var(--mo-cream-deep); /* derivado */
  --t-apoio:      var(--mo-brown);      /* derivado */
}

/* Verbatim do bundle: o tema Açaí troca os quatro --t-* e o resto
   do sistema segue igual. É o mecanismo do white label, já provado
   em produção no site. */
body.theme-acai,
.theme-acai {
  --t-fg:       var(--ac-paper);
  --t-bg:       var(--ac-black);
  --t-accent:   var(--ac-magenta);
  --t-accent-2: var(--ac-lime);

  --t-superficie: #1D1C18;  /* derivado — o bundle usa #1d1c18 em cartão e form */
  --t-borda:      rgba(255, 255, 255, 0.08);
  --t-apoio:      #A39C8E;
}

/* ── Apelidos herdados ────────────────────────────────────────
   O /ds que o Painel e o Checklist consomem hoje chamava o
   vermelho de "wine" e apontava para outros valores. Os nomes
   ficam vivos para a troca não quebrar componente; ao migrar cada
   app, troque a chamada pelo token da marca e apague a linha. */
:root {
  --mo-wine:      var(--mo-red);
  --mo-wine-deep: var(--mo-red-deep);
}