/* WanderWiser Club — design tokens
   Source: project/WanderWiser Identidade.dc.html (Claude Design handoff) */

:root {
  /* Primary palette */
  --wwc-bg: #0E2A38;        /* fundo principal */
  --wwc-bg-deep: #081C26;   /* fundo profundo */
  --wwc-card: #16394A;      /* cartão */
  --wwc-card-2: #1D485C;    /* cartão secundário */
  --wwc-amber: #F2A65A;     /* acento de ação, primário */
  --wwc-coral: #E8674C;     /* acento raro, alertas */
  --wwc-text: #F4F1EA;      /* texto claro */
  --wwc-muted: #9DB2BE;     /* texto secundário/muted */

  /* Secondary support palette */
  --wwc-sand: #D9D2C4;      /* fundo alternativo claro */
  --wwc-mist: #6E8794;      /* linhas, ícones, estados off */
  --wwc-graphite: #0A1218;  /* texto sobre areia */

  /* Type */
  --wwc-font-serif: Cambria, Georgia, serif;
  --wwc-font-mono: 'Courier New', monospace;
  --wwc-font-sans: Calibri, 'Segoe UI', system-ui, sans-serif;

  /* Layout */
  --wwc-margin: 72px;
  --wwc-margin-sm: 30px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--wwc-bg-deep);
  color: var(--wwc-text);
  font-family: var(--wwc-font-sans);
}

a { color: var(--wwc-amber); text-decoration: none; }
a:hover { color: var(--wwc-text); }

.eyebrow {
  font-family: var(--wwc-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wwc-muted);
}

.wwc-monogram {
  border-radius: 50%;
  border: 2px solid var(--wwc-amber);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wwc-font-serif);
  color: var(--wwc-amber);
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  font-size: 16px;
  font-family: var(--wwc-font-sans);
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
}
.btn-primary { background: var(--wwc-amber); color: var(--wwc-bg-deep); }
.btn-secondary { border-color: var(--wwc-amber); color: var(--wwc-amber); }
.btn-coral { border-color: var(--wwc-coral); color: var(--wwc-coral); }
.btn-tertiary { border-color: var(--wwc-card-2); color: var(--wwc-muted); }