/* ============================================================
   CAMPARA SOLUTIONS — Design Tokens
   Variáveis CSS prontas para usar em qualquer projeto.
   Import: <link rel="stylesheet" href="tokens.css">
   ============================================================ */

:root {
  /* ----- COLORS ----- */
  --campara-signal: #E85D2C;       /* laranja, acento principal */
  --campara-signal-hi: #FF6A2E;    /* versão vibrante (hover) */
  --campara-ink: #0A0A0A;          /* texto, o C */
  --campara-stone: #2A2724;        /* texto secundário escuro */
  --campara-paper: #FFFFFF;        /* fundo padrão */
  --campara-soft: #F7F5F0;         /* fundo alternativo */
  --campara-cream: #F1EDE4;        /* fundo mais quente */
  --campara-gold: #D4A642;         /* cintilante raro */
  --campara-grid: #EBE6DD;         /* linhas do padrão Circuit */
  --campara-grid-dot: #D5CEBF;     /* pontos do padrão */
  --campara-line: rgba(10,10,10,0.08);   /* divisores sutis */
  --campara-line-strong: rgba(10,10,10,0.15); /* divisores fortes */

  /* ----- TYPE FAMILIES ----- */
  --campara-font-sans: 'Manrope', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --campara-font-serif: 'Marcellus', Georgia, 'Times New Roman', serif;
  --campara-font-italic: 'Instrument Serif', Georgia, serif;
  --campara-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ----- TYPE SIZES (mobile-first scale) ----- */
  --campara-fs-display: clamp(64px, 11vw, 168px);
  --campara-fs-h1: clamp(48px, 7vw, 96px);
  --campara-fs-h2: clamp(36px, 5vw, 64px);
  --campara-fs-h3: clamp(24px, 3vw, 36px);
  --campara-fs-lead: clamp(18px, 2vw, 22px);
  --campara-fs-body: 16px;
  --campara-fs-small: 14px;
  --campara-fs-caption: 11px;

  /* ----- LETTERSPACING ----- */
  --campara-tracking-display: -0.04em;
  --campara-tracking-cs: -0.08em;
  --campara-tracking-tight: -0.02em;
  --campara-tracking-normal: 0;
  --campara-tracking-wide: 0.18em;
  --campara-tracking-wider: 0.32em;
  --campara-tracking-widest: 0.5em;

  /* ----- SPACING ----- */
  --campara-space-1: 4px;
  --campara-space-2: 8px;
  --campara-space-3: 12px;
  --campara-space-4: 16px;
  --campara-space-5: 24px;
  --campara-space-6: 32px;
  --campara-space-7: 48px;
  --campara-space-8: 64px;
  --campara-space-9: 96px;
  --campara-space-10: 128px;

  /* ----- RADII ----- */
  --campara-radius-sm: 4px;
  --campara-radius-md: 8px;
  --campara-radius-lg: 14px;
  --campara-radius-xl: 24px;

  /* ----- SHADOWS ----- */
  --campara-shadow-sm: 0 4px 12px -4px rgba(10,10,10,0.08);
  --campara-shadow-md: 0 20px 40px -10px rgba(10,10,10,0.15);
  --campara-shadow-lg: 0 50px 100px -30px rgba(10,10,10,0.3);

  /* ----- TRANSITIONS ----- */
  --campara-transition: 0.2s ease-out;

  /* ----- BORDERS ----- */
  --campara-border: 1px solid var(--campara-line);
  --campara-border-strong: 1px solid var(--campara-line-strong);
}

/* ============================================================
   UTILITY · COMPONENTES MÍNIMOS
   Classes opcionais — sinta-se livre pra usar só os tokens acima.
   ============================================================ */

.campara-cs {
  font-family: var(--campara-font-sans);
  font-weight: 800;
  letter-spacing: var(--campara-tracking-cs);
  line-height: 1;
}
.campara-cs .c { color: var(--campara-ink); }
.campara-cs .s { color: var(--campara-signal); }
.campara-cs .dot { color: var(--campara-signal); }

.campara-wordmark {
  font-family: var(--campara-font-serif);
  text-transform: uppercase;
  letter-spacing: var(--campara-tracking-wider);
}
.campara-wordmark .descriptor {
  letter-spacing: var(--campara-tracking-widest);
  font-size: 0.7em;
  color: var(--campara-signal);
  display: block;
  margin-top: 0.4em;
  padding-left: 0.5em;
}

.campara-eyebrow {
  font-family: var(--campara-font-mono);
  font-size: var(--campara-fs-caption);
  letter-spacing: var(--campara-tracking-wide);
  text-transform: uppercase;
  opacity: 0.55;
}
.campara-eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--campara-signal);
  margin-right: 10px;
  vertical-align: middle;
}

.campara-button {
  display: inline-flex;
  align-items: center; gap: 10px;
  padding: 14px 24px;
  background: var(--campara-ink);
  color: var(--campara-paper);
  border-radius: var(--campara-radius-sm);
  font-family: var(--campara-font-sans);
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: var(--campara-transition);
}
.campara-button:hover { background: var(--campara-stone); }
.campara-button.outline {
  background: transparent;
  color: var(--campara-ink);
  border: 1px solid var(--campara-ink);
}
.campara-button.signal {
  background: var(--campara-signal);
}
.campara-button.signal:hover { background: var(--campara-signal-hi); }