/* ============================================
   RADAR DESIGN SYSTEM — tokens.css
   Carregado em todas as páginas do tema.
   Mood: candlelit gallery
   ============================================ */

:root {
  --radar-bg: #FAFBFB;
  --radar-surface: #FFFFFF;
  --radar-surface-tint: rgba(216, 103, 83, 0.15);
  --radar-accent: #A74930;
  --radar-accent-hover: #8E3D28;
  --radar-accent-pressed: #6F2F1E;
  --radar-border: #E6E6E6;
  --radar-border-subtle: rgba(0, 0, 0, 0.05);
  --radar-text: #08090A;
  --radar-text-muted: #3E4148;
  --radar-text-soft: #9097A1;
  --radar-success: #3E8E5A;
  --radar-warning: #C7892B;
  --radar-error: #A23A26;
  --radar-info: #3E5C8E;
  --radar-gradient-warm: linear-gradient(176deg, #F2C9B8 9%, #E2937A 80%);

  --radar-font-display: "Duru Sans", system-ui, sans-serif;
  --radar-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --radar-space-xs: 4px;
  --radar-space-sm: 8px;
  --radar-space-md: 12px;
  --radar-space-4: 16px;
  --radar-space-lg: 24px;
  --radar-space-6: 32px;
  --radar-space-xl: 48px;
  --radar-space-8: 64px;
  --radar-space-2xl: 96px;

  --radar-radius-sm: 6px;
  --radar-radius-md: 12px;
  --radar-radius-pill: 999px;

  --radar-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
  --radar-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --radar-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15);
}

body {
  background: var(--radar-bg);
  color: var(--radar-text);
  font-family: var(--radar-font-display);
  font-size: 16px;
  line-height: 1.56;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--radar-text);
  font-family: var(--radar-font-display);
  font-weight: 400;
}

h1 { font-size: 72px; line-height: 72px; letter-spacing: -0.022em; }
h2 { font-size: 32px; line-height: 36px; letter-spacing: -0.022em; }
h3 { font-size: 20px; line-height: 30px; letter-spacing: -0.012em; }

@media (max-width: 767px) {
  h1 { font-size: 44px; line-height: 48px; }
  h2 { font-size: 26px; line-height: 30px; }
}

a { color: var(--radar-accent); transition: color 200ms ease; }
a:hover { color: var(--radar-accent-pressed); }

.eyebrow {
  font-family: var(--radar-font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--radar-text-soft);
}

.caption {
  font-family: var(--radar-font-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--radar-text-muted);
}

/* ===== BUTTONS ===== */

.btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radar-radius-sm);
  background: var(--radar-accent);
  color: #FFFFFF;
  font-family: var(--radar-font-display);
  font-size: 14px;
  line-height: 18px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--radar-shadow-md);
  transition: background 200ms ease, box-shadow 200ms ease;
}
.btn--primary:hover { background: var(--radar-accent-hover); color: #FFFFFF; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
.btn--primary:active { background: var(--radar-accent-pressed); box-shadow: none; }
.btn--primary:focus-visible { outline: 2px solid var(--radar-accent); outline-offset: 2px; }
.btn--primary[disabled] { background: #D8C9C4; opacity: 0.6; cursor: not-allowed; box-shadow: none; }

.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radar-radius-sm);
  background: var(--radar-surface);
  color: var(--radar-text-muted);
  font-family: var(--radar-font-display);
  font-size: 14px;
  line-height: 18px;
  border: 1px solid var(--radar-border);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.btn--ghost:hover { border-color: var(--radar-text); color: var(--radar-text); }
.btn--ghost:active { background: #F4ECEA; border-color: var(--radar-text); }
.btn--ghost:focus-visible { outline: 2px solid var(--radar-accent); outline-offset: 2px; }
.btn--ghost[disabled] { background: var(--radar-bg); border-color: #ECECEC; color: var(--radar-text-soft); cursor: not-allowed; }

.btn--link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--radar-accent);
  font-family: var(--radar-font-display);
  font-size: 14px;
  line-height: 18px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.btn--link:hover { color: var(--radar-accent-pressed); border-bottom-color: currentColor; }

/* ===== FORM FIELDS ===== */

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--radar-border);
  border-radius: var(--radar-radius-sm);
  background: var(--radar-surface);
  color: var(--radar-text);
  font-family: var(--radar-font-display);
  font-size: 14px;
  line-height: 18px;
  transition: border-color 150ms ease;
}
.field input:hover { border-color: var(--radar-text); }
.field input:focus { outline: none; border: 2px solid var(--radar-accent); padding: 11px 15px; }
.field--error input { border-color: var(--radar-error); }
.field--success input { border-color: var(--radar-success); }
.field input::placeholder { color: var(--radar-text-soft); }

/* ===== TAGS · PILLS · CARDS · ROWS ===== */

.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--radar-radius-sm);
  background: var(--radar-surface);
  border: 1px solid var(--radar-border);
  font-family: var(--radar-font-display);
  font-size: 13px;
  line-height: 16px;
  color: var(--radar-text-muted);
  cursor: pointer;
  transition: all 200ms ease;
}
.tag:hover { background: #F4ECEA; border-color: var(--radar-text); color: var(--radar-text); }
.tag.is-active,
.tag[aria-selected="true"] { background: var(--radar-accent); border-color: var(--radar-accent); color: #FFFFFF; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radar-radius-pill);
  background: var(--radar-surface);
  border: 1px solid var(--radar-border);
  font-family: var(--radar-font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--radar-text-muted);
}
.pill__dot { width: 18px; height: 18px; border-radius: 999px; background: var(--radar-accent); flex-shrink: 0; }

.card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  gap: 18px;
  background: var(--radar-surface);
  border: 1px solid var(--radar-border);
  border-radius: var(--radar-radius-md);
  box-shadow: var(--radar-shadow-xs);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.card:hover { border-color: var(--radar-accent); box-shadow: var(--radar-shadow-lg); transform: translateY(-2px); }
.card--tinted { background: var(--radar-surface-tint); }

.row-edition {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--radar-border-subtle);
  transition: background 150ms ease;
}
.row-edition:last-child { border-bottom: none; }
.row-edition:hover { background: var(--radar-bg); }
.row-edition.is-active {
  background: var(--radar-surface-tint);
  border-left: 2px solid var(--radar-accent);
  padding-left: 22px;
  padding-block: 18px;
}

/* ===== UTILITIES ===== */

.is-warm-bg { background: var(--radar-gradient-warm); }
.section-pad { padding: 72px 80px; }

@media (max-width: 1024px) {
  .section-pad { padding: 56px 40px; }
}
@media (max-width: 767px) {
  .section-pad { padding: 48px 20px; }
}