/**
 * Impressões Online — Design Tokens v2 (fonte única de cores, escala, raios, dimensões, layout).
 * Referência normativa: project/design/redesign-v2/redesign.css + project/design/redesign-v2-handoff.md §2–§3.
 * Este é o único arquivo CSS autorizado a conter cores hexadecimais.
 *
 * Tema: sem atributo em <html> = Automático (segue prefers-color-scheme, troca ao vivo).
 *       html[data-theme="light"|"dark"] força o tema independentemente do sistema.
 */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Superfícies e texto (AC1) */
  --page: #ffffff;
  --raised: #ffffff;
  --inset: #f4f8fb;
  --ink: #121a2f;
  --text2: #536173;
  --subtle: #5d6c80;
  --line: #d9e6ef;
  --control: #7a8ba1;
  --wash: #e3fbfd;
  --wash2: #ffe4f2;
  --brand: #0f6f86;
  --brand-h: #0b5a6d;
  --on-brand: #ffffff;

  /* Status: texto / fundo / preenchimento */
  --ok: #166534;
  --ok-bg: #dcfce7;
  --ok-fill: #22c55e;
  --warn: #92400e;
  --warn-bg: #fef3c7;
  --warn-fill: #f59e0b;
  --info: #1e40af;
  --info-bg: #dbeafe;
  --info-fill: #3b82f6;
  --bad: #b91c1c;
  --bad-bg: #fee2e2;
  --bad-fill: #ef4444;
  --danger-solid: #b91c1c;
  --on-grad: #ffffff;

  /* Sombras e overlay (AC8) — sem sombra de brilho */
  --shadow: 0 1px 2px rgb(18 26 47 / 0.05), 0 8px 24px rgb(18 26 47 / 0.06);
  --paper-shadow: 0 2px 4px rgb(18 26 47 / 0.06), 0 18px 36px rgb(18 26 47 / 0.14);
  --overlay: rgb(18 26 47 / 0.6);

  /* Gradiente da marca: somente botão primário/CTA (R5), idêntico nos dois temas */
  --grad: linear-gradient(135deg, #22a49d 0%, #4299e7 56%, #d94aa3 100%);
  --grad-h: linear-gradient(135deg, #1c8f89 0%, #3585d2 56%, #c73890 100%);
}

/* Tokens invariantes ao tema */
:root {
  /* Tipografia */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Raios (AC5) */
  --r-pill: 999px;
  --r-input: 12px;
  --r-seg: 14px;
  --r-opt: 10px;
  --r-card: 22px;
  --r-art: 28px;
  --r-paper: 4px;

  /* Dimensões (AC6) */
  --h-btn: 48px;
  --h-btn-sm: 38px;
  --h-btn-lg: 56px;
  --h-input: 48px;
  --h-opt: 44px;
  --h-step: 40px;
  --h-icon: 44px;

  /* Layout (AC7) */
  --wrap: 1200px;
  --narrow: 720px;
  --aside: 340px;
  --gutter: 24px;
  --section-gap: 56px;

  /* Movimento (AC de F1/AB#490) */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 150ms;
  --motion-menu: 200ms;
  --motion-standard: 320ms;
  --motion-reveal: 600ms;
  --motion-stagger: 70ms;
}

@media (max-width: 767px) {
  :root {
    --r-card: 20px;
    --gutter: 16px;
    --section-gap: 22px;
  }
}

/* Tema escuro (R10): paleta escura original, nunca quase preta. Automático: acompanha o sistema... */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #2b2d43;
    --raised: #34364e;
    --inset: #3d405a;
    --ink: #f5f8ff;
    --text2: #c3c9de;
    --subtle: #a9b1cb;
    --line: #626884;
    --control: #8d94b3;
    --wash: #213f56;
    --wash2: #4a2d4a;
    --brand: #8edee4;
    --brand-h: #b9eef2;
    --on-brand: #2b2d43;
    --ok: #86efac;
    --ok-bg: #1f4d36;
    --warn: #fcd34d;
    --warn-bg: #5a4310;
    --info: #93c5fd;
    --info-bg: #1e3a6b;
    --bad: #fca5a5;
    --bad-bg: #5c2330;
    --danger-solid: #dc2626;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.11), 0 10px 28px rgb(0 0 0 / 0.11);
    --paper-shadow: 0 2px 4px rgb(0 0 0 / 0.2), 0 18px 36px rgb(0 0 0 / 0.32);
    --overlay: rgb(0 0 0 / 0.6);
  }
}

/* ... ou forçado por data-theme="dark" (no <html> ou em um bloco isolado, p.ex. galeria) */
[data-theme="dark"] {
  color-scheme: dark;
  --page: #2b2d43;
  --raised: #34364e;
  --inset: #3d405a;
  --ink: #f5f8ff;
  --text2: #c3c9de;
  --subtle: #a9b1cb;
  --line: #626884;
  --control: #8d94b3;
  --wash: #213f56;
  --wash2: #4a2d4a;
  --brand: #8edee4;
  --brand-h: #b9eef2;
  --on-brand: #2b2d43;
  --ok: #86efac;
  --ok-bg: #1f4d36;
  --warn: #fcd34d;
  --warn-bg: #5a4310;
  --info: #93c5fd;
  --info-bg: #1e3a6b;
  --bad: #fca5a5;
  --bad-bg: #5c2330;
  --danger-solid: #dc2626;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.11), 0 10px 28px rgb(0 0 0 / 0.11);
  --paper-shadow: 0 2px 4px rgb(0 0 0 / 0.2), 0 18px 36px rgb(0 0 0 / 0.32);
  --overlay: rgb(0 0 0 / 0.6);
}

/* ---------------------------------------------------------------------------
 * UTILITIES — escala tipográfica (.t-*), números, layout e visibilidade.
 * Valores 1:1 de project/design/redesign-v2/redesign.css.
 * --------------------------------------------------------------------------- */
.t-display { font-family: var(--font-sans); font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
.t-h1 { font-family: var(--font-sans); font-size: 32px; line-height: 40px; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
.t-h2 { font-family: var(--font-sans); font-size: 22px; line-height: 30px; font-weight: 800; letter-spacing: -0.015em; }
.t-h3 { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 700; }
.t-lead { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; color: var(--text2); }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.t-small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; }
.t-caption, .t-cap { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; }
.t-label { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 700; color: var(--text2); }
.t-total { font-family: var(--font-sans); font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text2); }
.subtle { color: var(--subtle); }
.mono { font-family: var(--font-mono); font-size: 13px; line-height: 20px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: var(--narrow); margin: 0 auto; padding: 0 var(--gutter); }
.sections { display: flex; flex-direction: column; gap: var(--section-gap); }
.split { display: flex; gap: 24px; align-items: flex-start; }
.split-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.split-side { flex: 0 0 var(--aside); width: var(--aside); min-width: 0; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }

@media (min-width: 768px) {
  .mob { display: none !important; }
}

@media (max-width: 767px) {
  .desk { display: none !important; }
  .t-display { font-size: 34px; line-height: 40px; }
  .t-h1 { font-size: 26px; line-height: 32px; }
  .split { flex-direction: column; align-items: stretch; }
  .split-side { position: static; width: auto; flex: none; }
}

/* Cabeçalho: completo a partir de 1024 px; abaixo, compacto. */
@media (min-width: 1024px) {
  .hdr-compact { display: none !important; }
}

@media (max-width: 1023px) {
  .hdr-full { display: none !important; }
}

/* Paper objects (R7): cores fixas das folhas, iguais nos dois temas — única exceção à regra de zero hex em componentes. */
:root {
  --paper: #ffffff;
  --paper-line: #d9e6ef;
  --paper-ink: #17213a;
  --paper-sky: #b9e8ef;
  --paper-teal: #48cfd8;
  --paper-magenta: #e053a7;
  --paper-violet: #8374dd;
  --paper-blue: #4299e7;
  --paper-blush: #ffe4f2;
  --paper-green: #22a49d;
}