/* BeHonored.ai — shared brand template.
   Canonical design tokens + brand primitives (focus ring, animated guiding-star
   logo, buttons, nav underline) shared across the marketing site and the app.
   Plain, framework-agnostic CSS — drop it in anywhere.

   Hosted at https://behonored.ai/brand/brand.css and linked by both sites.
   This is the single source of truth for the brand palette; it mirrors the
   app's tailwind.config.js tokens — change a value here and update that too. */

:root {
  /* ---- Core tokens — names mirror the app's Tailwind tokens ---------------- */
  --primary: #102a43;              /* deep navy */
  --primary-dark: #0a1c2e;
  --accent: #b8860b;               /* gold — decoration (fails AA as text on light) */
  --accent-text: #8a6508;          /* darkened gold — AA-safe as text */
  --link: #1d4ed8;
  --error: #b42318;
  --brand-text: #1a2230;
  --brand-text-secondary: #51607a;
  --brand-bg: #f6f8fb;
  --brand-bg-card: #ffffff;
  --brand-border: #dce2ec;
  --focus: #2563eb;

  /* ---- Aliases — keep the marketing site's existing --color-* rules working - */
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-dark);
  --color-accent: var(--accent);
  --color-accent-text: var(--accent-text);
  --color-link: var(--link);
  --color-text: var(--brand-text);
  --color-text-muted: var(--brand-text-secondary);
  --color-bg: var(--brand-bg);
  --color-surface: var(--brand-bg-card);
  --color-border: var(--brand-border);
  --color-focus: var(--focus);

  /* ---- Shared scale -------------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 42, 67, 0.08);
  --shadow-md: 0 6px 24px rgba(16, 42, 67, 0.10);
  --container-max: 68rem;
}

/* Consistent, visible focus ring across every brand surface. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- Brand logo — animated guiding star -----------------------------------
   brand/logo.svg embeds its own breathe/twinkle, so <img class="bh-logo"> moves
   on its own. These rules add the on-load ease-in and the gold hover glow at the
   element level. Inlined-SVG consumers (e.g. the app) also get .bh-star /
   .bh-spark driven directly from here — identical to the app's input.css. */
.bh-logo {
  overflow: visible;            /* let the breathe scale + hover glow spill past the box */
  animation: bh-in 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: filter 0.3s ease;
}
.bh-star,
.bh-spark { transform-box: fill-box; transform-origin: center; }
.bh-star  { animation: bh-breathe 5s ease-in-out infinite; }
.bh-spark { animation: bh-twinkle 3.2s ease-in-out infinite 0.5s; }
.brand-logo:hover .bh-logo,
a.brand:hover .bh-logo { filter: drop-shadow(0 0 6px rgb(201 146 20 / 0.6)); }

@keyframes bh-in {
  from { opacity: 0; transform: scale(0.6) rotate(-20deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes bh-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes bh-twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.5); } 45% { opacity: 1; transform: scale(1); } }

/* ---- Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6); border-radius: var(--radius);
  font: inherit; font-weight: 600; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
}
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); }
.btn--ghost { background: transparent; color: var(--primary); border-color: var(--brand-border); }
.btn--ghost:hover { border-color: var(--primary); }
.btn--gold { background: var(--accent); color: var(--primary); }
.btn--gold:hover { background: #cf9a18; }

/* ---- Nav link — gold underline that wipes in on hover/active --------------- */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0.25rem;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0); transition: transform 0.25s ease;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* ---- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bh-logo, .bh-star, .bh-spark { animation: none; }
}