/* Makers Rebrand — Opção 2 · Azul Petróleo × Ciano Operacional */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ── Marca-mãe ── */
  --o2-petrol:        #0F2F3A;
  --o2-petrol-2:      #0A232C;
  --o2-cyan:          #18C7D4;
  --o2-cyan-2:        #0EA5B7;

  /* ── Produtos ── */
  --o2-explorador:    #22C55E;
  --o2-whatsapp:      #16A34A;
  --o2-aos:           #F59E0B;
  --o2-bots:          #18C7D4;
  --o2-estudio:       #374B52;

  /* ── Neutros ── */
  --o2-paper:         #F6FAFB;
  --o2-paper-2:       #ECF4F6;
  --o2-white:         #FFFFFF;
  --o2-ink:           #1F2933;
  --o2-muted:         #5B6B73;
  --o2-line:          #D9E2E7;

  /* ── Apoios suaves ── */
  --o2-cyan-pale:     #DDF7FA;
  --o2-green-pale:    #E9FBEF;
  --o2-amber-pale:    #FFF4DB;
  --o2-petrol-pale:   #E8F0F3;

  /* ── Tipografia ── */
  --o2-sans:  'Manrope', Inter, system-ui, sans-serif;
  --o2-mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* ── Spacing 8pt scale ── */
  --o2-s1: 4px;  --o2-s2: 8px;  --o2-s3: 12px; --o2-s4: 16px;
  --o2-s5: 24px; --o2-s6: 32px; --o2-s7: 48px; --o2-s8: 64px;
  --o2-s9: 96px; --o2-s10: 128px;

  /* ── Radius — suave, modular ── */
  --o2-r:   8px;
  --o2-r2:  12px;
  --o2-r3:  16px;
  --o2-r4:  20px;
  --o2-r-full: 9999px;
}

.o2 * { box-sizing: border-box; }
.o2 { font-family: var(--o2-sans); color: var(--o2-ink); -webkit-font-smoothing: antialiased; }
.o2 ::selection { background: var(--o2-cyan); color: #fff; }

.o2-card {
  background: var(--o2-white);
  border-radius: var(--o2-r3);
  border: 1px solid var(--o2-line);
}

.o2-grid {
  display: grid;
  gap: 16px;
}