/*
 * OPB-546 — camada canônica de tokens do Portal.
 *
 * A família `--portal-*` nasceu em `portal-auth.css`, que só é carregada
 * quando `usesPortalVisualLayer` é verdadeiro. Na landing os tokens ficavam
 * indefinidos, e a superfície pública acabou com uma segunda família própria
 * em `app.css`/`theme-*.css` e uma terceira, zinc, em `opb-controls.css`.
 * Onde um controle encostava numa superfície apareciam dois cinzas de
 * famílias diferentes — medido na navbar: borda `#e4e9e3` no alternador de
 * tema contra `#d4d4d8` no botão ao lado.
 *
 * Esta folha carrega antes de todas as outras e é a única fonte dos valores.
 * As outras famílias derivam daqui; não redefinir literal nas folhas abaixo.
 *
 * Somente light e all-black. Valores legados dark/dark-blue migram para preto.
 */

html.light {
  --portal-bg: #f6f8f6;
  --portal-surface: #ffffff;
  --portal-surface-2: #eff4ef;
  --portal-ink: #111b11;
  --portal-muted: #586358;
  --portal-border: #dae1da;
  --portal-accent: #063d2b;
  --portal-accent-2: #009157;
  /* Verde da marca do ecossistema, para superfície preenchida como o avatar.
     Separado do `--portal-accent`, que é a escala própria do portal: no
     `all-black` ele é #daebda e o círculo sairia praticamente branco.
     O par resolve por tema como no Terminal e no Diário: mesmo matiz e
     saturação, luminosidade 25% no claro contra 39% no escuro. #00804d com
     tinta branca lê 5,01:1; #00c978 sobre branco cairia para 2,18:1. */
  --portal-brand: #00804d;
  --portal-brand-ink: #ffffff;
  --portal-success: #047857;
  --portal-warning: #b45309;
  --portal-danger: #b91c1c;
  --portal-shadow: 0 8px 18px rgba(14, 28, 15, .08);
  --portal-navbar-tier-color: #6a7769;
  /* Shimmer e CTA de upgrade sao os mesmos valores do Terminal, por tema.
     O Portal tinha escala propria e o mesmo gesto aparecia verde num produto
     e prateado no outro. Fonte: `app.css` e `layouts/app.php` do Terminal. */
  --portal-navbar-shimmer-base: #0e1c0f;
  --portal-navbar-shimmer-mid: #063d2b;
  --portal-navbar-shimmer-light: #0d9488;
  --upgrade-cta-from: #00e08a;
  --upgrade-cta-to: #00a765;
  --upgrade-cta-ink: #00180f;
  --upgrade-cta-border: rgba(0, 60, 36, .28);
  --upgrade-cta-glow: rgba(0, 145, 87, .30);
  --upgrade-cta-glow-strong: rgba(0, 145, 87, .45);
  --upgrade-cta-sheen: rgba(255, 255, 255, .55);

  --portal-card-bg: var(--portal-surface);
}

html.all-black {
  --portal-bg: #000000;
  --portal-surface: #0d0d0d;
  --portal-surface-2: #171717;
  --portal-ink: #ffffff;
  --portal-muted: #c7c7c7;
  --portal-border: #2a2a2a;
  --portal-accent: #daebda;
  --portal-accent-2: #ffffff;
  --portal-brand: #00c978;
  --portal-brand-ink: #001b10;
  --portal-success: #00ff88;
  --portal-warning: #fbbf24;
  --portal-danger: #f87171;
  --portal-shadow: none;
  --portal-navbar-tier-color: #c7c7c7;
  --portal-navbar-shimmer-base: #063d2b;
  --portal-navbar-shimmer-mid: #009157;
  --portal-navbar-shimmer-light: #99f6e4;
  --upgrade-cta-from: #00e08a;
  --upgrade-cta-to: #00a765;
  --upgrade-cta-ink: #00180f;
  --upgrade-cta-border: rgba(255, 255, 255, .22);
  --upgrade-cta-glow: rgba(0, 201, 120, .38);
  --upgrade-cta-glow-strong: rgba(0, 201, 120, .55);
  --upgrade-cta-sheen: rgba(255, 255, 255, .45);

  --portal-card-bg: var(--portal-surface);
}