/* ==========================================================================
   IA2S — identidade visual em CSS
   Valores extraídos dos arquivos da pasta Identidade Visual.
   Tema escuro é o padrão. Tema claro em [data-theme="light"] ou .ia2s-light.

   Uso mínimo:
     <link rel="stylesheet" href="ia2s-brand.css">
     <body class="ia2s"> ... </body>
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,0..100,0..1;1,9..144,300..700,0..100,0..1&family=Manrope:wght@300..800&display=swap');

:root {
  /* ---- cor da marca ---- */
  --ia2s-gold: #D4A82E;
  --ia2s-gold-bright: #E8C040;
  --ia2s-gold-pale: #F0CC4D;
  --ia2s-gold-deep: #8B6E15;   /* dourado legível sobre fundo claro (4,60:1) */
  --ia2s-gold-ember: #5A4218;
  --ia2s-earth: #2A2010;

  /* ---- escuros ---- */
  --ia2s-dark-ambient: #1A130A;
  --ia2s-dark-surface: #16110A;
  --ia2s-dark-mid: #100B05;
  --ia2s-dark: #0D0A06;
  --ia2s-dark-well: #0E0A06;
  --ia2s-shadow: #050301;      /* só com transparência: vinheta */

  /* ---- claros ---- */
  --ia2s-white: #FFFFFF;
  --ia2s-cream: #F0EBE0;
  --ia2s-cream-light: #F6ECC8;
  --ia2s-cream-label: #CFC7B5;
  --ia2s-paper: #FAF9F7;
  --ia2s-text-2: #D5CFC2;
  --ia2s-text-3: #B8B2A4;
  --ia2s-text-dim: #888070;    /* os comparadores também usam #9A9384 para o mesmo papel */

  /* ---- papéis semânticos (tema escuro, padrão) ---- */
  --ia2s-bg: var(--ia2s-dark);
  --ia2s-bg-gradient: radial-gradient(circle at 50% 50%, #1A130A 0%, #100B05 55%, #0D0A06 100%);
  --ia2s-surface: var(--ia2s-dark-surface);
  --ia2s-text: var(--ia2s-cream);
  --ia2s-text-muted: var(--ia2s-text-dim);
  --ia2s-accent: var(--ia2s-gold);
  --ia2s-accent-text: var(--ia2s-gold);        /* dourado usado como texto */
  --ia2s-on-accent: var(--ia2s-dark);          /* texto sobre botão dourado */
  --ia2s-border: rgba(212, 168, 46, 0.25);
  --ia2s-border-strong: rgba(212, 168, 46, 0.5);
  --ia2s-glow: radial-gradient(circle at 60% 22%, rgba(212, 168, 46, 0.14), transparent 55%);
  --ia2s-vignette: radial-gradient(ellipse at center, transparent 55%, rgba(5, 3, 1, 0.55) 100%);

  /* ---- tipografia ---- */
  --ia2s-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ia2s-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ia2s-font-mono: 'Menlo', 'Consolas', 'Courier New', monospace;
  --ia2s-wonk: 'opsz' 144, 'SOFT' 0, 'WONK' 1;

  --ia2s-size-h1: 46px;
  --ia2s-size-h2: 34px;
  --ia2s-size-h3: 26px;
  --ia2s-size-alma: 24px;
  --ia2s-size-body: 17px;
  --ia2s-size-small: 15px;
  --ia2s-size-eyebrow: 14px;
  --ia2s-size-pill: 13px;
  --ia2s-size-label: 12px;

  --ia2s-track-eyebrow: 0.35em;
  --ia2s-track-pill: 0.25em;
  --ia2s-track-label: 0.3em;
  --ia2s-track-wordmark: 0.55em;

  /* ---- forma e espaço ---- */
  --ia2s-radius: 3px;
  --ia2s-radius-pill: 999px;
  --ia2s-space-1: 6px;
  --ia2s-space-2: 14px;
  --ia2s-space-3: 26px;
  --ia2s-space-4: 48px;
  --ia2s-measure: 46ch;
}

/* tema claro: papel, texto preto quente, dourado escurecido para leitura */
[data-theme="light"],
.ia2s-light {
  --ia2s-bg: var(--ia2s-paper);
  --ia2s-bg-gradient: none;
  --ia2s-surface: #FFFFFF;
  --ia2s-text: #0D0A06;
  /* #6B6355 é derivado, não vem dos arquivos originais: #888070 dá 3,72:1 sobre
     papel e reprova; escurecido chega a 5,64:1. Trocar por qualquer tom acima de 4,5:1. */
  --ia2s-text-muted: #6B6355;
  --ia2s-accent: var(--ia2s-gold);
  --ia2s-accent-text: var(--ia2s-gold-deep);   /* #D4A82E reprova em contraste no claro */
  --ia2s-on-accent: var(--ia2s-dark);
  --ia2s-border: rgba(13, 10, 6, 0.14);
  --ia2s-border-strong: rgba(139, 110, 21, 0.55);
  --ia2s-glow: none;
  --ia2s-vignette: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not(.ia2s-dark) {
    --ia2s-bg: var(--ia2s-paper);
    --ia2s-bg-gradient: none;
    --ia2s-surface: #FFFFFF;
    --ia2s-text: #0D0A06;
    --ia2s-text-muted: #6B6355;
    --ia2s-accent-text: var(--ia2s-gold-deep);
    --ia2s-border: rgba(13, 10, 6, 0.14);
    --ia2s-border-strong: rgba(139, 110, 21, 0.55);
    --ia2s-glow: none;
    --ia2s-vignette: none;
  }
}

/* ==========================================================================
   base
   ========================================================================== */

.ia2s {
  background-color: var(--ia2s-bg);
  background-image: var(--ia2s-bg-gradient);
  color: var(--ia2s-text);
  font-family: var(--ia2s-font-body);
  font-size: var(--ia2s-size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.ia2s h1, .ia2s h2, .ia2s h3 { font-family: var(--ia2s-font-body); font-weight: 600; }
.ia2s h1 { font-size: var(--ia2s-size-h1); font-weight: 500; line-height: 1.08; letter-spacing: -0.01em; }
.ia2s h2 { font-size: var(--ia2s-size-h2); line-height: 1.04; letter-spacing: -0.01em; }
.ia2s h3 { font-size: var(--ia2s-size-h3); line-height: 1.2; }
.ia2s p  { max-width: var(--ia2s-measure); }
.ia2s a  { color: var(--ia2s-accent-text); text-underline-offset: 3px; }

/* ==========================================================================
   tipografia da marca
   ========================================================================== */

/* título em serifa da casa */
.ia2s-display {
  font-family: var(--ia2s-font-display);
  font-variation-settings: var(--ia2s-wonk), 'wght' 600;
  font-weight: 600;
  line-height: 1.05;
}

/* a frase que carrega o sentido — italic dourada */
.ia2s-alma {
  font-family: var(--ia2s-font-display);
  font-style: italic;
  font-weight: 450;
  font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 1;
  font-size: var(--ia2s-size-alma);
  color: var(--ia2s-gold-bright);
  letter-spacing: 0.02em;
}

[data-theme="light"] .ia2s-alma,
.ia2s-light .ia2s-alma { color: var(--ia2s-gold-deep); }

/* ênfase dourada dentro de um título em sans */
.ia2s-accent { color: var(--ia2s-accent-text); }

/* sobrelinha de seção */
.ia2s-eyebrow {
  font-size: var(--ia2s-size-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ia2s-track-eyebrow);
  color: var(--ia2s-accent-text);
}

/* wordmark espaçado, tipo ECOSSISTEMA */
.ia2s-wordmark {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ia2s-track-wordmark);
  color: var(--ia2s-accent-text);
  padding-left: var(--ia2s-track-wordmark);
}

.ia2s-label {
  font-size: var(--ia2s-size-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ia2s-track-label);
  color: var(--ia2s-accent-text);
}

.ia2s-muted { color: var(--ia2s-text-muted); }

.ia2s-number {
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.02em;
  color: var(--ia2s-accent-text);
}

/* ==========================================================================
   componentes
   ========================================================================== */

.ia2s-divider {
  width: 60px;
  height: 2px;
  background: var(--ia2s-accent);
  border: 0;
  margin: var(--ia2s-space-3) 0;
}

.ia2s-pill {
  display: inline-block;
  border: 1px solid var(--ia2s-accent);
  color: var(--ia2s-accent-text);
  text-transform: uppercase;
  letter-spacing: var(--ia2s-track-pill);
  font-size: var(--ia2s-size-pill);
  font-weight: 600;
  padding: 7px 18px;
  border-radius: var(--ia2s-radius-pill);
}

.ia2s-badge {
  display: inline-block;
  background: var(--ia2s-accent);
  color: var(--ia2s-on-accent);
  font-weight: 700;
  font-size: var(--ia2s-size-small);
  letter-spacing: 0.04em;
  padding: 6px 16px;
  border-radius: var(--ia2s-radius);
}

.ia2s-card {
  background: var(--ia2s-surface);
  border: 1px solid var(--ia2s-border);
  border-top: 3px solid var(--ia2s-accent);
  padding: 24px;
  border-radius: var(--ia2s-radius);
}

.ia2s-btn {
  display: inline-block;
  font-weight: 600;
  font-size: var(--ia2s-size-small);
  padding: 13px 22px;
  border-radius: var(--ia2s-radius);
  text-decoration: none;
  cursor: pointer;
}
.ia2s-btn--primary { background: var(--ia2s-accent); color: var(--ia2s-on-accent); border: 1px solid var(--ia2s-accent); }
.ia2s-btn--ghost   { background: transparent; color: var(--ia2s-accent-text); border: 1px solid var(--ia2s-accent); }

/* moldura por cantoneiras — pede position:relative no pai */
.ia2s-corners { position: relative; }
.ia2s-corners::before,
.ia2s-corners::after {
  content: '';
  position: absolute;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ia2s-border-strong);
}
.ia2s-corners::before { top: 26px; left: 26px; border-right: none; border-bottom: none; }
.ia2s-corners::after  { bottom: 26px; right: 26px; border-left: none; border-top: none; }

/* atmosferas */
.ia2s-glow     { background-image: var(--ia2s-glow); }
.ia2s-vignette { position: relative; }
.ia2s-vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--ia2s-vignette);
}

/* malha de circuito — versão CSS aproximada do tile 600x600 dos scripts */
.ia2s-circuit {
  background-color: var(--ia2s-dark);
  background-image:
    linear-gradient(rgba(212, 168, 46, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 168, 46, 0.10) 1px, transparent 1px);
  background-size: 120px 120px;
}

/* ==========================================================================
   impressão
   ========================================================================== */

@media print {
  .ia2s {
    background: #FFFFFF !important;
    color: #0D0A06 !important;
  }
  .ia2s-accent, .ia2s-eyebrow, .ia2s-label, .ia2s-alma, .ia2s-number, .ia2s a {
    color: #8B6E15 !important;
  }
  .ia2s-glow, .ia2s-vignette::after { background: none !important; }
  .ia2s-card { border-color: rgba(13, 10, 6, 0.2) !important; background: #FFFFFF !important; }
}