/**
 * ==========================================================================
 * ICD GLOBAL VISUAL FOUNDATION — v0.2-rc1
 * TOKENS UNIVERSAIS DA BOLHA 2 (RITMO EDITORIAL + HARMONIZAÇÃO TIPOGRÁFICA)
 * 
 * Classificação: FUNDAÇÃO VISUAL CANDIDATA v0.2-rc1 — NÃO CANÔNICA — NÃO HOMOLOGADA
 * ==========================================================================
 */

:root {
  /* ─── 1. SISTEMA TIPOGRÁFICO CANDIDATO (MONTSERRAT / QUICKSAND / LATO) ─── */
  --font-display:             "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-lead:                "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:                "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-interface:           "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Aliases para compatibilidade */
  --icd-font-display:         var(--font-display);
  --icd-font-title:           var(--font-display);
  --icd-font-lead:            var(--font-lead);
  --icd-font-body:            var(--font-body);
  --icd-font-interface:       var(--font-interface);

  /* Tracking Funcional */
  --tracking-title:           -0.02em;
  --tracking-title-tight:     -0.03em;
  --tracking-rubric:          0.14em;
  --tracking-normal:          0em;

  /* Entrelinhas Funcionais */
  --lh-display:               1.08;
  --lh-heading:               1.20;
  --lh-lead:                  1.32;
  --lh-body:                  1.58;

  /* Escala Tipográfica Fluida */
  --size-h1:                  clamp(2.4rem, 5.2vw, 4.0rem);
  --size-h2:                  clamp(1.8rem, 3.6vw, 2.85rem);
  --size-h3:                  clamp(1.3rem, 2.2vw, 1.8rem);
  --size-lead:                clamp(1.15rem, 1.6vw, 1.4rem);
  --size-body:                clamp(1.0rem, 1.15vw, 1.125rem);
  --size-caption:             0.8125rem;
  --size-rubric:              0.75rem;

  /* ─── 2. PERFIS FUNCIONAIS DE DENSIDADE & RESPIRO (MANSION BREATH) ─── */
  --space-section-hero:       clamp(5.5rem, 10vw, 8.5rem);
  --space-section-default:    clamp(4.5rem, 8vw, 6.5rem);
  --space-section-compact:    clamp(3.0rem, 5vw, 4.5rem);
  --space-card-pad:           clamp(2.0rem, 3.5vw, 3.25rem);
  --space-grid-gap:           clamp(1.75rem, 3vw, 2.75rem);
  --space-container-pad:      clamp(1.5rem, 4vw, 4rem);

  /* ─── 3. PALETA DE SUPERFÍCIE LUMINOSA (MARFIM NOBRE) ─── */
  --icd-surface-canvas:       #FAF8F5;   /* Marfim dominante */
  --icd-surface-canvas-sub:   #F5F2EB;   /* Marfim de respiração */
  --icd-surface-card:         #FFFFFF;   /* Branco quente */
  --icd-surface-card-subtle:  #FCFAF7;   /* Superfície de cartão secundário */
  --icd-surface-translucent:  rgba(250, 248, 245, 0.88);

  /* ─── 4. CARVÃO ESTRUTURAL E TEXTO (WCAG AAA/AA) ─── */
  --icd-ink-headline:         #111111;   /* Carvão profundo (15.4:1 sobre marfim) */
  --icd-ink-body:             #222222;   /* Carvão leitura (12.0:1 sobre marfim) */
  --icd-ink-muted:            #555555;   /* Carvão apoio (6.2:1 - AA) */
  --icd-ink-subtle:           #666666;   /* Rubricas e rótulos (4.8:1 - AA garantido) */

  /* ─── 5. ACENTOS INSTITUCIONAIS DA BOLHA 2 ─── */
  --icd-accent-gold:          #C58A1E;   /* Dourado nobre escurecido para contraste */
  --icd-accent-gold-deep:     #9E6B0F;   /* Dourado escuro de alto contraste */
  --icd-accent-wine:          #8B141E;   /* Vinho solene (7.5:1 sobre marfim) */
  --icd-accent-wine-hover:    #6D0E16;   /* Vinho escuro de hover */
  --icd-accent-terracotta:    #B54D1A;   /* Terracota acadêmica */

  /* ─── 6. BORDAS E SOMBRAS ETÉREAS ─── */
  --icd-border-hairline:      rgba(17, 17, 17, 0.08);
  --icd-border-subtle:        rgba(17, 17, 17, 0.12);
  --icd-border-gold:          rgba(197, 138, 30, 0.35);
  
  --icd-shadow-ethereal:      0 20px 50px rgba(17, 17, 17, 0.04), 0 1px 3px rgba(17, 17, 17, 0.02);
  --icd-shadow-card:          0 8px 24px rgba(17, 17, 17, 0.05);
  --icd-shadow-elevated:      0 16px 40px rgba(17, 17, 17, 0.07);

  /* ─── 7. FOCO E ACESSIBILIDADE ─── */
  --icd-focus-ring:           0 0 0 3px rgba(139, 20, 30, 0.45);
  --icd-transition-smooth:    0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── 8. CASCATA TIPOGRÁFICA RIGOROSA POR FUNÇÃO ─── */
body {
  font-family: var(--font-body);
  color: var(--icd-ink-body);
  background-color: var(--icd-surface-canvas);
}

/* Headings e Títulos Display */
h1, h2, h3,
.h1, .h2, .h3,
[data-typography="display"],
.title-display {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: var(--tracking-title) !important;
  color: var(--icd-ink-headline);
}

h1 {
  font-size: var(--size-h1);
  line-height: var(--lh-display);
}

h2 {
  font-size: var(--size-h2);
  line-height: var(--lh-heading);
}

h3 {
  font-size: var(--size-h3);
  line-height: var(--lh-heading);
}

/* Herança nos descendentes de Headings (exceto ícones) */
h1 *:not(.material-symbols-outlined):not(.material-icons):not([class*="fa-"]):not(.fa):not([data-icon]),
h2 *:not(.material-symbols-outlined):not(.material-icons):not([class*="fa-"]):not(.fa):not([data-icon]),
h3 *:not(.material-symbols-outlined):not(.material-icons):not([class*="fa-"]):not(.fa):not([data-icon]),
.h1 *:not(.material-symbols-outlined):not(.material-icons):not([class*="fa-"]):not(.fa):not([data-icon]),
.h2 *:not(.material-symbols-outlined):not(.material-icons):not([class*="fa-"]):not(.fa):not([data-icon]),
.h3 *:not(.material-symbols-outlined):not(.material-icons):not([class*="fa-"]):not(.fa):not([data-icon]) {
  font-family: inherit;
}

/* Leads e Frases de Acolhimento */
.lead,
.subheading,
.manifesto-quote,
[data-typography="lead"] {
  font-family: var(--font-lead) !important;
  font-weight: 500 !important;
  font-size: var(--size-lead);
  line-height: var(--lh-lead);
  color: var(--icd-ink-body);
}

.lead *:not(.material-symbols-outlined):not(.material-icons):not([class*="fa-"]):not(.fa),
.subheading *:not(.material-symbols-outlined):not(.material-icons):not([class*="fa-"]):not(.fa),
[data-typography="lead"] *:not(.material-symbols-outlined):not(.material-icons):not([class*="fa-"]):not(.fa) {
  font-family: inherit;
}

/* Links e Listas herdam contexto */
a {
  font-family: inherit;
}

li {
  font-family: inherit;
}

p {
  font-family: var(--font-body);
  line-height: var(--lh-body);
}

/* Elementos de Interface funcionais */
button,
input,
textarea,
select,
label,
nav,
table,
td,
th,
[data-typography="interface"] {
  font-family: var(--font-interface) !important;
}

/* Rubricas em caixa alta com tracking */
.rubrica, .badge, .tag, .meta-label, .portal-categoria {
  font-family: var(--font-interface) !important;
  letter-spacing: var(--tracking-rubric) !important;
  text-transform: uppercase !important;
  font-size: var(--size-rubric) !important;
}

/* ─── 9. PROTEÇÃO ABSOLUTA DE FONTES DE ÍCONES ─── */
.material-symbols-outlined,
.material-symbols-rounded,
.material-symbols-sharp {
  font-family: "Material Symbols Outlined", "Material Symbols Rounded", "Material Symbols Sharp" !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: "liga" !important;
  -webkit-font-smoothing: antialiased !important;
}

.material-icons {
  font-family: "Material Icons" !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.fa, .fas, .far, .fab, .fal, .fad,
[class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-style: normal !important;
  font-weight: 900 !important;
}

.far {
  font-weight: 400 !important;
}

.fab {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
  font-weight: 400 !important;
}

/* ─── 10. ACESSIBILIDADE E MOVIMENTO REDUZIDO ─── */
:focus-visible {
  outline: 2px solid var(--icd-accent-wine) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}