/* ============================================================
   ReasonHub Design System — Colors & Type
   v1.1  ·  05.Jun.2026
   ============================================================
   CHANGELOG
   v1.1 (05.Jun.2026)
     · +token --sky-tint-solid (#E4EDF6): superfície tonal sólida
       para fundo de card em formato NATIVO (PPTX/PDF), onde o
       rgba do .panel-tint não traduz. +3 pares WCAG.
     · Raio: cards/painéis = --radius-lg (12px), confirmado como
       raio máximo do sistema. Removido --radius-xl (20px, órfão
       e contradizia o teto de 12px do USAGE §1).
     · Card unificado: "caixa pedagógica" deixou de existir como
       componente à parte — premissa/conclusão/definição/exemplo
       são os 4 fills de card (ver USAGE §5.1).
   v1.0 (15.Mai.2026) — versão inicial.
   ============================================================
   FONTE ÚNICA DE VERDADE dos valores de cor/tipo. Tudo importa
   daqui. Ao mudar um valor, seguir o mapa de propagação do
   CLAUDE.md §7. (Material de setup original — paletas em chave
   humana, CMYK/Pantone — fica em Archive_Old/, sem função no
   sistema; não referenciar.)
   The palette is closed at seven colors plus three reserved
   semantic colors. Never introduce a new hue.
   ------------------------------------------------------------
   CONTRASTE WCAG 2.1 AA (mín. 4,5:1 texto normal · 3:1 texto
   grande/UI). Regra viva — respeitar sem exceção.

   APROVADAS (texto sobre fundo):
     Gunmetal      #303434 / Off White #FAFAFA — 12,4:1 AAA
     Prussian Blue #0B1E2F / Off White #FAFAFA — 16,5:1 AAA
     Reddish Brown #993B2C / Off White #FAFAFA —  7,5:1 AAA
     Dim Grey      #6E7272 / Off White #FAFAFA —  4,6:1 AA
     Off White     #FAFAFA / Prussian Blue     — 16,5:1 AAA
     Off White     #FAFAFA / Gunmetal          — 12,4:1 AAA
     Sky Blue      #8BBBE4 / Prussian Blue     —  7,6:1 AAA
     Sky Blue      #8BBBE4 / Gunmetal          —  5,7:1 AA
     Gunmetal      #303434 / Sky-tint #E4EDF6  — 11,8:1 AAA
     Prussian Blue #0B1E2F / Sky-tint #E4EDF6  — 15,7:1 AAA
     Reddish Brown #993B2C / Sky-tint #E4EDF6  — só rótulo/acento (Reddish nunca é cor de corpo)

   PROIBIDAS (falham AA — usar o substituto):
     Sky Blue      #8BBBE4 / Off White  — 1,9:1 → usar Prussian Blue
     Dust Grey     #D9D7D2 / Off White  — 1,2:1 → usar Dim Grey
     Reddish Brown #993B2C / Prussian   — 2,2:1 → usar Sky Blue
     Reddish Brown #993B2C / Gunmetal   — 1,7:1 → usar Sky Blue
   ============================================================ */

/* Webfonts — IBM Plex (Sans, Serif, Mono) is the brand family.
   Sans: UI, body, body-headings.
   Serif: editorial display — cover, section dividers, big quotes.
   Mono: numbers, page counters, citation labels, code.
   Loaded as its own stylesheet ('reasonhub-fonts' in functions.php), not via
   @import here — the font CSS must download in parallel with this file. */

:root {
  /* ---------- 1. Core palette (the seven, by-name) ---------- */
  --reddish-brown: #993B2C;   /* Marrom Avermelhado · marca, acento, primário */
  --reddish-brown-hover: #7A2E1E; /* Hover/visited do primário */
  --prussian-blue: #0B1E2F;   /* Azul Prússia · fundo institucional */
  --sky-blue:      #8BBBE4;   /* Azul Celeste · secundário claro, badge, focus */
  --gunmetal:      #303434;   /* Cinza Chumbo · texto, citação, footer */
  --dim-grey:      #6E7272;   /* Cinza Esmaecido · texto secundário */
  --dust-grey:     #D9D7D2;   /* Cinza Poeira · divisórias, fundos sutis */
  --dust-grey-light: #F0EEE9; /* Linha alternada de tabela */
  --off-white:     #FAFAFA;   /* Branco Suave · fundo claro padrão */
  --sky-tint-solid: #E4EDF6;  /* SUPERFÍCIE DERIVADA (não é 8ª cor): Sky Blue 20% achatado sobre Off White, hue idêntico ao Sky Blue. Use em fundo tonal de formato NATIVO (PPTX/PDF), onde o rgba do .panel-tint não traduz. No HTML, continua sendo .panel-tint. */

  /* ---------- 2. Reserved semantic (status only) ---------- */
  --sage-green:    #4A6B3A;   /* Sucesso */
  --deep-red:      #B5351C;   /* Erro */
  --amber-earth:   #C68A2E;   /* Aviso */

  /* ---------- 3. Semantic — Web surfaces ---------- */
  --bg-body:        var(--off-white);
  --bg-section:     var(--dust-grey);
  --bg-inverse:     var(--prussian-blue);
  --bg-footer:      var(--gunmetal);
  --bg-card:        var(--off-white);
  --bg-tooltip:     var(--gunmetal);

  /* ---------- 4. Semantic — Text ---------- */
  --fg-strong:      var(--gunmetal);      /* H1-H4, body on light */
  --fg-body:        var(--gunmetal);
  --fg-muted:       var(--dim-grey);      /* legendas, caption, page number */
  --fg-on-inverse:  var(--off-white);     /* texto sobre escuro */
  --fg-muted-on-inverse: var(--sky-blue); /* subtítulo sobre escuro */
  --fg-accent:      var(--reddish-brown); /* keyword highlight, link */

  /* ---------- 5. Semantic — Borders & dividers ---------- */
  --border-default: var(--dust-grey);
  --border-card:    var(--dust-grey);
  --border-card-hover: var(--dim-grey);
  --border-input:   var(--dust-grey);
  --border-input-focus: var(--sky-blue);

  /* ---------- 6. Semantic — Components ---------- */
  --btn-primary-bg:    var(--reddish-brown);
  --btn-primary-fg:    var(--off-white);
  --btn-primary-hover: var(--reddish-brown-hover);
  --btn-secondary-fg:  var(--gunmetal);
  --btn-secondary-border: var(--gunmetal);
  --btn-disabled-bg:   var(--dust-grey);
  --btn-disabled-fg:   var(--dim-grey);

  --badge-bg:   var(--sky-blue);
  --badge-fg:   var(--prussian-blue);

  --focus-ring: var(--sky-blue);
  --selection:  rgba(139, 187, 228, 0.30); /* sky-blue 30% */

  /* ---------- 7. Typography — face stack ---------- */
  --font-sans:    "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif:   "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-display: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ---------- 8. Type scale (IBM Plex, fluid clamps for web; fixed for slides) ---------- */
  --fs-display:   clamp(40px, 5.0vw, 64px);   /* slide title, hero */
  --fs-h1:        clamp(34px, 3.6vw, 46px);
  --fs-h2:        clamp(28px, 2.8vw, 36px);
  --fs-h3:        clamp(22px, 2.0vw, 26px);
  --fs-h4:        20px;
  --fs-body:      18px;
  --fs-small:     16px;
  --fs-caption:   14px;
  --fs-eyebrow:   14px;   /* uppercase tracking, used for BLOCO labels */

  --lh-tight:     1.10;
  --lh-snug:      1.25;
  --lh-normal:    1.45;
  --lh-relaxed:   1.60;

  --tracking-eyebrow: 0.12em;
  --tracking-display: -0.01em;
  --tracking-body:    0em;

  /* ---------- 9. Spacing tokens (4-px base) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- 10. Radii ---------- */
  --radius-xs: 2px;   /* fios, dividers */
  --radius-sm: 4px;   /* badges, tags */
  --radius-md: 6px;   /* botões, inputs, tags */
  --radius-lg: 12px;  /* cards e painéis (anatomia única de card) — raio máximo do sistema (§1) */
  --radius-pill: 999px;

  /* ---------- 11. Elevation / shadows ---------- */
  --shadow-1: 0 1px 3px rgba(11, 30, 47, 0.10);
  --shadow-2: 0 4px 10px rgba(11, 30, 47, 0.14), 0 1px 3px rgba(11, 30, 47, 0.08);
  --shadow-3: 0 12px 32px rgba(11, 30, 47, 0.20), 0 4px 10px rgba(11, 30, 47, 0.10);
  --shadow-4: 0 28px 64px rgba(11, 30, 47, 0.28), 0 8px 18px rgba(11, 30, 47, 0.14);
  --shadow-inset: inset 0 0 0 1px rgba(11, 30, 47, 0.08);

  /* ---------- 12. Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  /* ---------- 13. Layout ---------- */
  --container-max: 1200px;
  --container-pad: clamp(20px, 4vw, 48px);
}

/* ----------------------------------------------------------
   Base element styling — drop-in defaults
   ---------------------------------------------------------- */

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  margin: 0;
  background: var(--bg-body);
  color: var(--fg-body);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: 400;
}

::selection { background: var(--selection); color: var(--fg-strong); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--fg-strong);
  margin: 0 0 var(--space-4) 0;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p  { margin: 0 0 var(--space-4) 0; line-height: var(--lh-relaxed); text-wrap: pretty; }

small, .caption { font-size: var(--fs-caption); color: var(--fg-muted); }

a {
  color: var(--fg-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover, a:visited { color: var(--reddish-brown-hover); }

hr { border: 0; height: 1px; background: var(--border-default); margin: var(--space-8) 0; }

/* Inverse surfaces auto-adjust text */
[data-surface="inverse"], .surface-inverse {
  background: var(--bg-inverse);
  color: var(--fg-on-inverse);
}
[data-surface="inverse"] h1,
[data-surface="inverse"] h2,
[data-surface="inverse"] h3,
[data-surface="inverse"] h4 { color: var(--fg-on-inverse); }
[data-surface="inverse"] .muted,
[data-surface="inverse"] small,
[data-surface="inverse"] .caption { color: var(--fg-muted-on-inverse); }
[data-surface="inverse"] a { color: var(--sky-blue); }

[data-surface="gunmetal"] {
  background: var(--gunmetal);
  color: var(--fg-on-inverse);
}
[data-surface="gunmetal"] h1,
[data-surface="gunmetal"] h2 { color: var(--fg-on-inverse); }

/* ----------------------------------------------------------
   Typography utilities
   ---------------------------------------------------------- */

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
  line-height: 1;
}

.display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 600; letter-spacing: -0.015em; line-height: var(--lh-tight); }
.lede    { font-size: 18px; color: var(--fg-muted); line-height: var(--lh-relaxed); }

.serif   { font-family: var(--font-serif); }
.sans    { font-family: var(--font-sans); }
.mono    { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }

.keyword { color: var(--fg-accent); font-weight: 700; }

.muted   { color: var(--fg-muted); }
.strong  { font-weight: 700; }

.accent-rule {
  display: inline-block;
  width: 56px;
  height: 3px;
  background: var(--reddish-brown);
  border-radius: var(--radius-xs);
}

/* ----------------------------------------------------------
   Focus
   ---------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}