/* ============================================================================
   Brave Corp · CLAREZA EDITORIAL — utilitários de composição
   Classes com prefixo .ce- . Consomem só tokens semânticos/componente.
   Sem sombra: profundidade vem de escala, recorte, contraste tonal e réguas.
   ============================================================================ */

/* ---- Colunas e respiro ---- */
.ce-wrap { width: 100%; margin-inline: auto; padding-inline: var(--ce-inset-mobile); }
.ce-wrap--reading { max-width: calc(var(--ce-measure-reading) + 2 * var(--ce-inset-mobile)); }
.ce-wrap--content { max-width: calc(var(--ce-measure-content) + 2 * var(--ce-inset-mobile)); }
.ce-wrap--wide    { max-width: calc(var(--ce-measure-wide) + 2 * var(--ce-inset-mobile)); }

@media (min-width: 768px) {
  .ce-wrap { padding-inline: var(--ce-inset-tablet); }
  .ce-wrap--reading { max-width: calc(var(--ce-measure-reading) + 2 * var(--ce-inset-tablet)); }
  .ce-wrap--content { max-width: calc(var(--ce-measure-content) + 2 * var(--ce-inset-tablet)); }
  .ce-wrap--wide    { max-width: calc(var(--ce-measure-wide) + 2 * var(--ce-inset-tablet)); }
}
@media (min-width: 1280px) {
  .ce-wrap { padding-inline: var(--ce-inset-desktop); }
  .ce-wrap--reading { max-width: calc(var(--ce-measure-reading) + 2 * var(--ce-inset-desktop)); }
  .ce-wrap--content { max-width: calc(var(--ce-measure-content) + 2 * var(--ce-inset-desktop)); }
  .ce-wrap--wide    { max-width: calc(var(--ce-measure-wide) + 2 * var(--ce-inset-desktop)); }
}

/* ---- Tipografia ---- */
.ce-display-xl, .ce-display-l, .ce-h2, .ce-h3 {
  font-family: var(--ce-font-sans);
  color: var(--ce-text-primary);
  margin: 0;
  text-wrap: pretty;
}
.ce-display-xl { font-size: var(--ce-size-display-xl); line-height: var(--ce-leading-display); letter-spacing: var(--ce-tracking-display); font-weight: var(--ce-weight-context); }
.ce-display-l  { font-size: var(--ce-size-display-l);  line-height: var(--ce-leading-display); letter-spacing: var(--ce-tracking-display); font-weight: var(--ce-weight-context); }
.ce-h2         { font-size: var(--ce-size-h2);         line-height: var(--ce-leading-title);   letter-spacing: var(--ce-tracking-title);   font-weight: var(--ce-weight-context-soft); }
.ce-h3         { font-size: var(--ce-size-h3);         line-height: var(--ce-leading-title);   letter-spacing: var(--ce-tracking-title);   font-weight: var(--ce-weight-promise); }

/* jogo de peso dentro da mesma frase */
.ce-promise { font-weight: var(--ce-weight-promise); }
.ce-dot { color: var(--ce-accent); }

.ce-lead { font-family: var(--ce-font-sans); font-size: var(--ce-size-lead); line-height: var(--ce-leading-tight); color: var(--ce-text-secondary); margin: 0; max-width: 46ch; text-wrap: pretty; }
.ce-body { font-family: var(--ce-font-sans); font-size: var(--ce-size-body); line-height: var(--ce-leading-body); color: var(--ce-text-secondary); margin: 0; max-width: 68ch; text-wrap: pretty; }
.ce-interface { font-family: var(--ce-font-sans); font-size: var(--ce-size-interface); font-weight: var(--ce-weight-interface); color: var(--ce-text-primary); }

/* etiqueta técnica — o único lugar do Plex Mono */
.ce-meta {
  font-family: var(--ce-font-mono);
  font-size: var(--ce-size-meta);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ce-text-muted);
  margin: 0;
}

/* <code>/<kbd>/<samp> são conteúdo técnico legítimo, então caem na MESMA família
   do .ce-meta. Sem esta regra o navegador usa o `monospace` genérico — uma terceira
   família na página, e a regra de duas famílias é justamente o que este DS declara.
   0.92em compensa o x-height maior do Plex Mono ao lado do Franklin no mesmo px. */
[data-theme="clareza-editorial"] code,
[data-theme="clareza-editorial"] kbd,
[data-theme="clareza-editorial"] samp {
  font-family: var(--ce-font-mono);
  font-size: 0.92em;
  font-weight: 400;
}

/* números: Franklin tabular, nunca mono */
.ce-num {
  font-family: var(--ce-font-sans);
  font-weight: var(--ce-weight-promise);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: var(--ce-tracking-title);
}

/* ---- Réguas ---- */
.ce-rule { border: 0; border-top: var(--ce-rule) solid var(--ce-rule-color); margin: 0; }
.ce-rule--strong { border-top-width: var(--ce-rule-strong); border-top-color: var(--ce-border-strong); }

/* Filete do Eyebrow — em Clareza Editorial o filete NÃO é automático.
   `data-filete="auto"` = a prop foi omitida: some aqui, mas segue visível nos
   registros legados (a LP de captação depende disso em 6 seções).
   `data-filete="on"` = filete explícito, com função editorial: sempre visível. */
[data-theme="clareza-editorial"] hr[data-filete="auto"] { display: none; }

/* ---- Links ---- */
[data-theme="clareza-editorial"] a { color: var(--ce-text-primary); text-decoration-color: var(--ce-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
[data-theme="clareza-editorial"] a:hover { text-decoration-thickness: 2px; }

/* ---- Foco visível ---- */
[data-theme="clareza-editorial"] :focus-visible {
  outline: 2px solid var(--ce-focus-ring);
  outline-offset: var(--ce-focus-offset);
}

/* ---- Mídia: fotografia real, cor natural, recorte retangular ---- */
.ce-figure { margin: 0; }
.ce-figure img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--ce-media-radius); }
.ce-figure figcaption { margin-top: var(--ce-space-3); }

/* Background institucional canônico — interlúdio, prova, síntese, fechamento.
   Nunca wallpaper contínuo. Preserva cor e arquitetura do asset.

   O utilitário owna a GEOMETRIA (enquadramento, crop de mobile, navy de base);
   a imagem vem da própria seção, porque esta folha é @import'ada e consumida de
   profundidades diferentes (raiz, guidelines/, ui_kits/<kit>/) — um url() fixo aqui
   não resolveria para todas, e url() dentro de custom property é inválido na
   substituição do var():
     <section class="ce-interlude" data-surface="inverse"
              style="background-image:url('assets/background-brave.png')">
   Sem a imagem, resta o navy estrutural — nunca um bloco quebrado. */
.ce-interlude {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--ce-navy-950);
}
/* crop de mobile: mantém o eixo diagonal reconhecível */
@media (max-width: 767px) {
  .ce-interlude { background-position: 68% center; }
}

/* ---- Motion ---- */
@media (prefers-reduced-motion: reduce) {
  [data-theme="clareza-editorial"] *,
  [data-theme="clareza-editorial"] *::before,
  [data-theme="clareza-editorial"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}