/* Estilos do PostRenderer (posts de imagem única). Carregar DEPOIS de
 * slide-styles.css e da folha de tokens da marca.
 *
 * `.surface-*` faz o que `.slide-frame.bg-*` faz no slide-styles.css, mas sem
 * exigir `.slide-frame` no seletor: o mesmo conjunto de cores de frente serve à
 * raiz do post e a cada painel dentro dele. As variáveis --s-<superfície>-* vêm
 * resolvidas por contraste de /api/brand/tokens.css; os fallbacks são neutros de
 * propósito (mesma regra do slide-styles.css).
 */

:root {
  /* Texto sobre foto e cor-base do overlay: hoje constantes, aqui são tokens que
   * uma marca pode sobrescrever. O overlay é `rgba(var(--post-overlay-rgb), a)`. */
  --post-on-image: #FFFFFF;
  --post-overlay-rgb: 10, 10, 15;
}

.surface-light {
  background: var(--color-bg, #FFFFFF);
  --color-text: var(--s-light-text, #1F2937);
  --color-muted: var(--s-light-muted, #6B7280);
  --color-accent: var(--s-light-accent, #666666);
  --color-chrome: var(--s-light-chrome, #333333);
  --color-rule: var(--s-light-rule, #E5E5E5);
  --color-list-check: var(--s-light-check, #16A34A);
  --color-on-accent: var(--s-light-on-accent, #FFFFFF);
  color: var(--color-text);
}
.surface-warm {
  background: var(--color-bg-warm, #F2F2F2);
  --color-text: var(--s-warm-text, #1F2937);
  --color-muted: var(--s-warm-muted, #6B7280);
  --color-accent: var(--s-warm-accent, #666666);
  --color-chrome: var(--s-warm-chrome, #333333);
  --color-rule: var(--s-warm-rule, #E5E5E5);
  --color-list-check: var(--s-warm-check, #16A34A);
  --color-on-accent: var(--s-warm-on-accent, #FFFFFF);
  color: var(--color-text);
}
.surface-dark {
  background: var(--color-bg-dark, #111111);
  --color-text: var(--s-dark-text, #FFFFFF);
  --color-muted: var(--s-dark-muted, #B8B8B8);
  --color-accent: var(--s-dark-accent, #999999);
  --color-chrome: var(--s-dark-chrome, #FFFFFF);
  --color-rule: var(--s-dark-rule, rgba(255,255,255,0.18));
  --color-list-check: var(--s-dark-check, #4ADE80);
  --color-on-accent: var(--s-dark-on-accent, #111111);
  color: var(--color-text);
}
.surface-primary {
  background: var(--color-bg-primary, var(--color-primary, #333333));
  --color-text: var(--s-primary-text, #FFFFFF);
  --color-muted: var(--s-primary-muted, #B8B8B8);
  --color-accent: var(--s-primary-accent, #999999);
  --color-chrome: var(--s-primary-chrome, #FFFFFF);
  --color-rule: var(--s-primary-rule, rgba(255,255,255,0.18));
  --color-list-check: var(--s-primary-check, #4ADE80);
  --color-on-accent: var(--s-primary-on-accent, #111111);
  color: var(--color-text);
}
.surface-orange {
  background: var(--color-bg-orange, var(--color-accent, #666666));
  --color-text: var(--s-orange-text, #FFFFFF);
  --color-muted: var(--s-orange-muted, #EEEEEE);
  --color-accent: var(--s-orange-accent, #FFFFFF);
  --color-chrome: var(--s-orange-chrome, #FFFFFF);
  --color-rule: var(--s-orange-rule, rgba(255,255,255,0.35));
  --color-list-check: var(--s-orange-check, #FFFFFF);
  --color-on-accent: var(--s-orange-on-accent, #111111);
  color: var(--color-text);
}

/* No fundo de acento a ênfase não pode se apoiar só na cor: ela é vizinha do
 * próprio fundo. Mesmo tratamento do `.bg-orange .accent` do slide-styles.css. */
.surface-orange .accent {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
}