/* ============================================================
   iAPX DESIGN SYSTEM · SUPERFÍCIE CLARA (web) · v1.1.0
   Camada opcional sobre iapx-web.css. Carregue DEPOIS dele.

   Não é um segundo tema: é uma terceira superfície. O sistema
   passa a operar em três registros —
     creme     leitura densa   (esta camada)
     grafite   autoridade      (iapx-web.css, padrão)
     vermilion impacto         (.iapx-orange)
   A alternância da §6 da spec deixa de ser binária.

   INVERSÃO DE PAPÉIS
   Os tokens da spec já são nomeados por papel, não por cor:
   `ink` é "fundo das páginas de leitura" e `cream` é "texto de
   alta hierarquia" (DESIGN_SYSTEM §2). Aqui os dois trocam de
   valor e mantêm o papel — nenhum nome passa a mentir.

   AUTORIZAÇÃO NA SPEC
   §1 já prevê aplicação sobre fundo claro ("Branco ou papel →
   wordmark vermilion ou grafite") e o wordmark-graphite.png
   existe para isso. Esta camada constrói o que a §1 previu.
   ============================================================ */

.iapx-light {
  --iapx-ink:     #F5EEE8;   /* chão de leitura — agora o creme  */
  --iapx-surface: #FFFFFF;   /* card sobre o creme                */
  --iapx-line:    #DCD2C8;   /* fio e divisor · 1,35:1 sobre creme */
  --iapx-cream:   #17120F;   /* tinta de alta hierarquia · 16,18:1 */
  --iapx-mute:    #6E5E52;   /* secundário · 5,40:1 no creme, 4,72:1 no rulebox */
  --iapx-accent:  #0B2A45;   /* o acento frio inverte para o profundo */

  /* Vermilion legível em corpo pequeno. No tema escuro esse papel é
     servido pelo vermilion-hot #F04B0A, que CLAREIA para ganhar
     contraste. Sobre superfície clara a direção se inverte: clarear
     piora (o hot cai para 3,20:1 no creme e 2,79:1 no rulebox).
     Aqui o mesmo papel exige escurecer. 5,35:1 no creme, 6,15:1 no
     branco, 4,68:1 sobre o fundo da caixa de regra — passa nas três. */
  --iapx-vermilion-ink: #B82D02;

  background: var(--iapx-ink);
  color: var(--iapx-cream);
}

/* O sky #5BC8F0 colapsa para 1,67:1 sobre creme e sai de cena.
   O accent-deep #0B2A45 assume em 12,77:1 — a §2 já mandava usá-lo
   "sobre superfície laranja"; a regra generaliza para toda
   superfície clara. A trava do acento único segue valendo. */

/* ── ilhas escuras dentro da página clara ─────────────────────
   Uma seção laranja, um bloco de CTA ou uma faixa grafite não
   deixam de ser o que são por estarem cercados de creme.
   Aqui os papéis voltam aos valores do tema escuro.          */
.iapx-light .iapx-orange,
.iapx-light .iapx-cta,
.iapx-light .iapx-ink-block {
  --iapx-ink:     #17120F;
  --iapx-surface: #221D19;
  --iapx-line:    #352E28;
  --iapx-cream:   #F5EEE8;
  --iapx-mute:    #9A8B80;
  --iapx-accent:  #5BC8F0;
  --iapx-vermilion-ink: #F04B0A;
}
.iapx-light .iapx-ink-block {
  background: var(--iapx-ink);
  color: var(--iapx-cream);
}

/* ── correções de valores que iapx-web.css fixou em rgba ─────
   Três regras do tema escuro trazem cor literal em vez de token
   e por isso não acompanham a inversão.                       */

/* borda do chip: rgba do sky, invisível sobre creme */
.iapx-light .iapx-chip { border-color: rgba(11, 42, 69, .45); }

/* caixa de regra negativa: creme a 5% sobre creme, invisível */
.iapx-light .iapx-rulebox--neg {
  background: rgba(23, 18, 15, .05);
  border-left-color: var(--iapx-cream);
}

/* fio do rodapé e do card herdam --iapx-line, já invertido acima */

/* ── ajuste de peso ──────────────────────────────────────────
   Sobre creme o vermilion pesa mais que sobre grafite: o mesmo
   traço lê mais forte contra fundo claro. A régua afina.      */
.iapx-light .iapx-rule { height: 4px; }
.iapx-light .iapx-card { border-top-width: 2px; }
.iapx-light .iapx-stat { border-bottom-width: 2px; }

/* ── vermilion de corpo pequeno sobre superfície clara ───────
   O token cascateia, então uma ilha escura dentro do claro já
   recebe o valor certo pela regra de reset acima.            */
.iapx-light .iapx-eyebrow,
.iapx-light .iapx-rulebox__title,
.iapx-light .iapx-table th:nth-child(2),
.iapx-light .iapx-lead .iapx-em,
.iapx-light .iapx-card__text .iapx-em,
.iapx-light .iapx-row__d .iapx-em,
.iapx-light .iapx-check .iapx-em,
.iapx-light .iapx-table td .iapx-em,
.iapx-light .iapx-rulebox p .iapx-em { color: var(--iapx-vermilion-ink); }

/* Dentro de uma ilha laranja o eyebrow é o selo grafite do tema (v1.1):
   fundo --iapx-dark, tinta vermilion-hot. */
.iapx-light .iapx-orange .iapx-eyebrow { color: var(--iapx-vermilion-hot); }
.iapx-light .iapx-cta .iapx-cta__label { color: var(--iapx-vermilion-hot); }

/* ── foco e botão fantasma sobre creme ───────────────────────
   O hot cai para 3,20:1 no creme: o anel de foco e o texto do
   botão fantasma usam o vermilion-ink (5,35:1 creme, 6,15:1 branco). */
.iapx-light a:focus-visible, .iapx-light button:focus-visible { outline-color: var(--iapx-vermilion-ink); }
.iapx-light .iapx-btn--ghost { color: var(--iapx-vermilion-ink); border-color: var(--iapx-vermilion); }
.iapx-light .iapx-btn--ghost:hover { color: var(--iapx-dark); }
.iapx-light .iapx-orange a:focus-visible { outline-color: var(--iapx-dark); }