/* Do protótipo ao produto — Imaginacom × Micromax.
   Fonte da verdade do sistema: tokens + camada de classes para páginas web.
   As primitivas de slide vivem em components/<Nome>/<Nome>.jsx. Ver readme.md. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');

:root {
  /* — famílias — família única, o contraste vem do peso — */
  --font: 'Sora', system-ui, sans-serif;
  --font-heading: var(--font);
  --font-body: var(--font);
  --font-weight-light: 300;   /* corpo — o peso padrão de parágrafo */
  --font-weight-body: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600; /* ênfase dentro do parágrafo, kickers, títulos de card */
  --font-weight-bold: 700;     /* títulos de seção */
  --font-weight-display: 800;  /* display, capa, números herói */

  /* — papéis de cor — */
  --color-bg: #FAFAF9;            /* fundo claro padrão (off-white) */
  --color-surface: #FFFFFF;       /* card sobre fundo claro, placa de logo */
  --color-surface-alt: #F2F2EE;   /* cabeçalho de tabela */
  --color-text: #16181A;          /* tinta sobre fundo claro */
  --color-dark: #101214;          /* fundo escuro — capa, dado, fechamento */
  --color-text-on-dark: #F5F5F2;
  --color-accent: #8BC53F;        /* verde-lima — Micromax */
  --color-accent-hover: #A4D95F;
  --color-accent-2: #2E9FD4;      /* azul — Imaginacom */
  --color-body: #3C4043;          /* parágrafo sobre fundo claro */
  --color-secondary: #5F6368;     /* apoio em card claro */
  --color-muted: #9AA0A6;         /* kicker, legenda, fonte de dado */
  --color-muted-on-dark: #C6CBD0; /* parágrafo sobre fundo escuro */
  --color-border: #E4E4E0;
  --color-border-dashed: #D0D0CB;
  --color-border-dark: #2A2E32;
  --color-divider: #E4E4E0;

  /* — rampas 100–900, uma mesma escala de valor para os três papéis — */
  --color-neutral-100: #F7F7F5;
  --color-neutral-200: #EDEDEA;
  --color-neutral-300: #E4E4E0;
  --color-neutral-400: #C6CBD0;
  --color-neutral-500: #9AA0A6;
  --color-neutral-600: #5F6368;
  --color-neutral-700: #3C4043;
  --color-neutral-800: #2A2E32;
  --color-neutral-900: #101214;

  --color-accent-100: #F2F9E6;
  --color-accent-200: #E0F2C6;
  --color-accent-300: #C9E79B;
  --color-accent-400: #ADDA6F;
  --color-accent-500: #8BC53F;
  --color-accent-600: #74A831;
  --color-accent-700: #5C8626;
  --color-accent-800: #45651C;
  --color-accent-900: #2F4614;

  --color-accent-2-100: #E6F4FB;
  --color-accent-2-200: #C3E6F6;
  --color-accent-2-300: #94D3EE;
  --color-accent-2-400: #61BCE3;
  --color-accent-2-500: #2E9FD4;
  --color-accent-2-600: #2382B0;
  --color-accent-2-700: #1B678C;
  --color-accent-2-800: #144C68;
  --color-accent-2-900: #0E3547;

  /* — espaço — escala de 8, os passos que a apresentação realmente usa — */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 56px;
  --space-8: 80px;
  --space-10: 120px;   /* padding lateral do slide */
  --gap-grid-2: 40px;
  --gap-grid-3: 28px;

  /* — forma — sem sombra em lugar nenhum — */
  --radius-sm: 16px;   /* faixa, placa de logo, caixa de destaque */
  --radius-md: 18px;   /* card de grade */
  --radius-lg: 20px;   /* card grande, tabela */
  --radius-round: 50%; /* marcador, numerador */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* — escala tipográfica do slide (canvas 1920×1080) — */
  --text-display: 118px;
  --text-title-xl: 104px;
  --text-title-lg: 88px;
  --text-title: 72px;
  --text-stat: 320px;
  --text-stat-sm: 56px;
  --text-lead: 34px;
  --text-card-title: 30px;
  --text-body: 27px;
  --text-caption: 26px;
  --text-kicker: 24px;

  /* — medidas de leitura — */
  --measure-title: 1500px;
  --measure-text: 1350px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Camada de classes — escala de interface (páginas web, docs, protótipos).
   Para slides, use as primitivas em components/. Nenhuma sombra: a hierarquia
   vem do contraste de fundo e da borda de 1px.
   ══════════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font); font-size: 17px; font-weight: var(--font-weight-light);
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font); margin: 0 0 var(--space-2); line-height: 1.1; }
h1 { font-size: 52px; font-weight: var(--font-weight-display); letter-spacing: -1.6px; }
h2 { font-size: 38px; font-weight: var(--font-weight-bold); letter-spacing: -1px; }
h3 { font-size: 27px; font-weight: var(--font-weight-semibold); letter-spacing: -0.4px; }
h4 { font-size: 21px; font-weight: var(--font-weight-semibold); }
h5 { font-size: 17px; font-weight: var(--font-weight-semibold); }
h6 { font-size: 13px; font-weight: var(--font-weight-semibold); letter-spacing: 0.18em; text-transform: uppercase; }
p { margin: 0 0 var(--space-2); max-width: 68ch; }
strong, b { font-weight: var(--font-weight-semibold); }
em, i { font-style: normal; font-weight: var(--font-weight-semibold); } /* a ênfase é peso, nunca itálico */
img { display: block; max-width: 100%; }
a { color: var(--color-accent-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent-600); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--color-accent-200); color: var(--color-text); }

.lead { font-size: 21px; font-weight: var(--font-weight-light); color: var(--color-body); line-height: 1.55; }
.muted { color: var(--color-secondary); }
.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* — superfície escura — */
.on-dark { background: var(--color-dark); color: var(--color-text-on-dark); }
.on-dark .muted { color: var(--color-muted); }
.on-dark p { color: var(--color-muted-on-dark); }
.on-dark a { color: var(--color-accent); }
.on-dark a:hover { color: var(--color-accent-hover); }

/* — kicker: versalete com tracking, o abre-seção do sistema — */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: var(--font-weight-semibold);
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent-2);
}
.kicker-lime { color: var(--color-accent); }
.kicker-muted { color: var(--color-muted); }
.kicker::before {
  content: ''; width: 8px; height: 8px; border-radius: var(--radius-round);
  background: currentColor; flex: none;
}
.kicker-plain::before { display: none; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.card-dark { background: var(--color-dark); color: var(--color-text-on-dark); border-color: transparent; }
.card-dark .card-body { color: var(--color-muted-on-dark); }
.card-dashed { background: transparent; border: 2px dashed var(--color-border-dashed); }
.card-num { font-size: 15px; font-weight: var(--font-weight-bold); color: var(--color-accent); font-variant-numeric: tabular-nums; }
.card-title { font-size: 19px; font-weight: var(--font-weight-semibold); line-height: 1.25; }
.card-body { margin: 0; font-size: 16px; font-weight: var(--font-weight-light); color: var(--color-secondary); line-height: 1.5; }

/* — faixa de destaque — */
.callout {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); font-size: 17px; font-weight: var(--font-weight-body);
  color: var(--color-body);
}
.callout::before {
  content: ''; width: 12px; height: 12px; border-radius: var(--radius-round);
  background: var(--color-accent-2); flex: none;
}
.callout-lime::before { background: var(--color-accent); }

/* — numerador de passo — */
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-round);
  background: var(--color-accent); color: var(--color-dark);
  font-size: 21px; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums;
}

/* — botões — o verde só aparece em área pequena — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 26px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 16px; font-weight: var(--font-weight-semibold);
  line-height: 1.2; cursor: pointer; text-decoration: none; background: transparent;
  color: var(--color-text);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-dark); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-primary:active { background: var(--color-accent-600); }
.btn-secondary { border-color: var(--color-border); background: var(--color-surface); }
.btn-secondary:hover { border-color: var(--color-neutral-400); }
.btn-secondary:active { background: var(--color-surface-alt); }
.btn-ghost { color: var(--color-accent-700); padding-inline: 8px; }
.btn-ghost:hover { color: var(--color-accent-600); }
.on-dark .btn-secondary { background: transparent; border-color: var(--color-border-dark); color: var(--color-text-on-dark); }
.on-dark .btn-secondary:hover { border-color: var(--color-neutral-600); }
.on-dark .btn-ghost { color: var(--color-accent); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; padding: 5px 14px;
  border-radius: var(--radius-sm); font-size: 13px; font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-700); }
.tag-outline { border: 1px solid var(--color-border); color: var(--color-secondary); }

/* — formulário — */
.field > label {
  display: block; font-size: 13px; font-weight: var(--font-weight-medium);
  color: var(--color-secondary); margin-bottom: 7px;
}
.input {
  width: 100%; min-height: 48px; padding: 12px 16px;
  font-family: var(--font); font-size: 16px; font-weight: var(--font-weight-light);
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  caret-color: var(--color-accent-2);
}
.input::placeholder { color: var(--color-muted); }
.input:hover { border-color: var(--color-neutral-400); }
.input:focus-visible { border-color: var(--color-accent-2); outline-offset: 0; }
textarea.input { min-height: 120px; resize: vertical; }

/* — tabela — */
.table { width: 100%; border-collapse: collapse; font-size: 16px; background: var(--color-surface); }
.table th {
  text-align: left; padding: 16px 20px; background: var(--color-surface-alt);
  font-size: 15px; font-weight: var(--font-weight-semibold); color: var(--color-text);
}
.table th.is-highlight { background: var(--color-dark); color: var(--color-accent); font-weight: var(--font-weight-bold); }
.table td { padding: 16px 20px; border-top: 1px solid var(--color-border); font-weight: var(--font-weight-light); color: var(--color-secondary); }
.table td:first-child { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.table td.is-highlight { color: var(--color-text); font-weight: var(--font-weight-body); }

/* — placa de logo: os dois logos vivem sobre branco, sempre — */
.logo-plate {
  display: inline-flex; align-items: center; background: #fff;
  border-radius: var(--radius-sm); padding: 18px 34px;
}
.logo-lockup { display: flex; align-items: center; gap: var(--space-4); }

/* — navegação — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-divider);
}
.nav-brand { font-weight: var(--font-weight-bold); font-size: 18px; letter-spacing: 0.02em; margin-right: auto; }
.nav a { color: var(--color-secondary); text-decoration: none; font-size: 16px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-text); }