/*
 * BARRY.IO — hand-written custom CSS (version-controlled, unlike the Elementor
 * "Custom CSS" DB field). Design tokens mirror ui/src/styles/tokens.css; keep them
 * aligned with the Elementor Global Kit so Elementor and block output match.
 *
 * Brand rules (docs/design/design-spec.md):
 *   - violet #9472DD is ACCENT ONLY (fails AA on white) — never a button/text background
 *   - navy #243846 carries buttons + dark sections
 *   - Geist for copy, JetBrains Mono for technical identifiers
 */

:root {
  --barry-primary: #9472DD;
  --barry-primary-hover: #7C60BA;
  --barry-primary-soft: #F2EEFB;
  --barry-navy: #243846;
  --barry-navy-hover: #2F4554;
  --barry-bg: #F7F7F8;
  --barry-surface: #FFFFFF;
  --barry-surface-alt: #F1F1F4;
  --barry-border: #E4E4E7;
  --barry-text: #18181B;
  --barry-text-muted: #65656B;
  --barry-radius-sm: 6px;
  --barry-radius: 10px;
  --barry-radius-lg: 14px;
  --barry-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04), 0 1px 1px rgba(24, 24, 27, 0.03);
  --barry-shadow: 0 4px 12px rgba(24, 24, 27, 0.06), 0 1px 2px rgba(24, 24, 27, 0.04);
}

/* Wordmark: "BARRY.IO" with a violet ".IO". Reproduce as live text, not an image. */
.barry-wordmark {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--barry-navy);
}
.barry-wordmark .io {
  color: var(--barry-primary);
}

/* Technical identifiers (client names, versions, code) render in the mono face. */
.barry-mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* Pills use fully-rounded corners per the design system. */
.barry-pill {
  border-radius: 999px;
}