/* ============================================================
   SOAPerando — Design Tokens
   Camada semântica única. Tema claro no :root, escuro em html.dark.
   Toda cor estrutural do app deve referenciar var(--token), nunca hex cru.
   Valores derivados do styles.css atual (mesma identidade, agora nomeada).
   ============================================================ */

:root {
  /* ---- MARCA (verde SOAPerando) ---- */
  --brand:            #0f766e;   /* primária — foco, ativo, acento verde */
  --brand-strong:     #0c5e54;   /* texto/realce sobre superfície clara */
  --brand-deep:       #0a4f47;   /* base do gradiente / estados escuros */
  --brand-teal:       #0d9488;   /* barra/detalhe secundário */
  --grad-brand:       linear-gradient(120deg, #0a4f47, #13796b);
  --grad-header:      linear-gradient(115deg, #0a463f 0%, #0f5d52 60%, #13796b 100%);

  /* ---- ACENTO (mint — assinatura vinda do site) ---- */
  --accent-mint:      #7fe3c8;   /* highlight; sempre com texto escuro em cima */
  --accent-mint-ink:  #0a463f;   /* texto sobre fundo mint */
  --accent-mint-soft: rgba(127,227,200,.14); /* wash de acento (chips ativos) */

  /* ---- SUPERFÍCIES ---- */
  --bg:               #eaeff1;   /* fundo da aplicação */
  --surface:          #ffffff;   /* cards, popovers, inputs em foco */
  --surface-soft:     #f7faf9;   /* input em repouso, zonas suaves */
  --surface-muted:    #f3f6f7;   /* faixas alternadas */
  --surface-brand:    #e6f3ef;   /* wash verde-água (chips/pills verdes) */
  --surface-brand-2:  #e2f1ed;   /* wash verde-água selecionado */

  /* ---- TEXTO ---- */
  --text:             #16252b;   /* corpo / títulos */
  --text-2:           #5a6c73;   /* secundário */
  --text-muted:       #7a8b92;   /* labels, metadados */
  --text-faint:       #9fb0b8;   /* placeholder, desabilitado */

  /* ---- BORDAS ---- */
  --border:           #e6ecee;   /* padrão de card/box */
  --border-soft:      #e2e8ec;   /* divisórias sutis */
  --border-strong:    #c2d8d0;   /* contorno com peso */

  /* ---- ESTADOS ---- */
  --danger:           #dc2626;   /* urgência, erro, red flag */
  --danger-strong:    #b42318;
  --danger-soft:      #fee2e2;   /* fundo de alerta vermelho */
  --danger-ink:       #b91c1c;   /* texto sobre danger-soft */
  --warn:             #d97706;   /* aviso */
  --warn-soft:        #fef3c7;   /* fundo de aviso amarelo */
  --warn-ink:         #9a6a23;   /* texto sobre warn-soft */
  --ok:               #1f8a5b;   /* sucesso */
  --ok-soft:          #dcfce7;
  --info:             #2a6fdb;   /* referência/azul informativo */
  --info-soft:        #dbeafe;

  /* ---- ELEVAÇÃO ---- */
  --shadow-sm:        0 1px 3px rgba(0,0,0,.08);
  --shadow-pop:       0 4px 16px rgba(0,0,0,.12);   /* popover flutuante */
  --shadow-cta:       0 5px 16px rgba(15,118,110,.28); /* botão primário */
  --shadow-modal:     0 20px 48px -12px rgba(10,70,63,.30);

  /* ---- RAIOS ---- */
  --r-xs:   6px;
  --r-sm:   9px;
  --r-md:   10px;
  --r-lg:   12px;
  --r-xl:   14px;
  --r-2xl:  16px;
  --r-pill: 999px;

  /* ---- TIPOGRAFIA ---- */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Acento editorial (assinatura do site): itálico da própria Jakarta.
     NÃO usar serifada no app — serifada é exclusiva das peças de marketing. */
  --accent-italic: italic 500 1em/1.3 var(--font-sans);

  /* Label de seção (uppercase + tracking) — assinatura de marca */
  --label-size:    11px;
  --label-weight:  700;
  --label-spacing: .06em;
}

/* ============================================================
   TEMA ESCURO — só reatribui os tokens. Nenhuma regra por-componente
   deve ser necessária aqui depois da migração; o app inteiro segue.
   ============================================================ */
html.dark {
  --brand:            #0f9688;
  --brand-strong:     #7ec9bc;
  --brand-deep:       #0a4f47;
  --brand-teal:       #0d9488;
  --grad-brand:       linear-gradient(120deg, #0d5247, #13796b);
  --grad-header:      linear-gradient(115deg, #0a2e2a 0%, #0d5247 60%, #13796b 100%);

  --accent-mint:      #7fe3c8;
  --accent-mint-ink:  #0a463f;
  --accent-mint-soft: rgba(127,227,200,.15);

  --bg:               #0d1c19;
  --surface:          #152620;
  --surface-soft:     #1a2e2a;
  --surface-muted:    #1a3028;
  --surface-brand:    #0f3d36;
  --surface-brand-2:  #1f3d37;

  --text:             #cce5df;
  --text-2:           #b0d4cc;
  --text-muted:       #7ec9bc;
  --text-faint:       #5a9e92;

  --border:           #1e3830;
  --border-soft:      #244038;
  --border-strong:    #2a4540;

  --danger:           #ff5d52;
  --danger-strong:    #e0524a;
  --danger-soft:      #2a1c1a;
  --danger-ink:       #f09090;
  --warn:             #d8c08a;
  --warn-soft:        #2a2410;
  --warn-ink:         #e6d5ae;
  --ok:              #5a9e92;
  --ok-soft:          #142820;
  --info:             #5a7580;
  --info-soft:        #1d3138;

  --shadow-sm:        0 1px 3px rgba(0,0,0,.4);
  --shadow-pop:       0 4px 16px rgba(0,0,0,.45);
  --shadow-cta:       0 5px 16px rgba(0,0,0,.5);
  --shadow-modal:     0 20px 48px -12px rgba(0,0,0,.6);
}