/*
 * HAMILLE shared UI foundation: design tokens + component grammar.
 * Canonical source: sites/shared/hamille-ui/.
 * Theme copies are generated; do not edit them directly.
 *
 * Layer contract: tokens here, components consume tokens, pages consume
 * components. One light source (top). Shadows are navy-tinted, never gray.
 * Motion touches transform/opacity only and honors reduced motion.
 */

:root {
  /* brand */
  --hui-navy: #061549;
  --hui-blue: #0078d4;
  --hui-ink: #15345f;

  /* control heights: the only three button sizes in the system */
  --hui-control-s: 40px;
  --hui-control-m: 48px;
  --hui-control-l: 56px;

  /* radius scale pairs with control height; cards sit one step above */
  --hui-radius-s: 8px;
  --hui-radius-m: 10px;
  --hui-radius-l: 12px;
  --hui-radius-card: 14px;

  /* single top light source */
  --hui-highlight: inset 0 1px 0 rgba(255, 255, 255, .18);
  --hui-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, .28);
  --hui-lowlight: inset 0 -1px 0 rgba(0, 0, 0, .22);

  /* navy-tinted two-layer depth */
  --hui-shadow-contact: 0 1px 2px rgba(6, 21, 73, .24);
  --hui-shadow-ambient: 0 8px 20px rgba(6, 21, 73, .16);
  --hui-shadow-contact-soft: 0 1px 2px rgba(6, 21, 73, .08);
  --hui-shadow-ambient-soft: 0 6px 16px rgba(6, 21, 73, .06);

  /* surfaces */
  --hui-grad-primary: linear-gradient(180deg, #0a2a6e 0%, #061549 100%);
  --hui-grad-primary-hover: linear-gradient(180deg, #103a8e 0%, #0a2260 100%);
  --hui-grad-primary-active: linear-gradient(180deg, #08215c 0%, #051040 100%);
  --hui-grad-raised: linear-gradient(180deg, #ffffff 0%, #fafcfe 100%);
  --hui-border-raised: #d5e2ef;
  --hui-tint: #f4f8fc;
  --hui-hairline: #e2eaf2;

  /* motion */
  --hui-ease: cubic-bezier(.22, 1, .36, 1);
  --hui-press-scale: .97;

  /* english accent face (thin geometric; system thin fallbacks) */
  --hui-font-en: "Jost", "Avenir Next", "Helvetica Neue", "Segoe UI", sans-serif;
}

/*
 * Button grammar. Markup opt-in only: WordPress content is never rewritten
 * to use these classes; theme-generated elements adopt them.
 */
.hui-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--hui-control-m);
  padding: 0 26px;
  border: 0;
  border-radius: var(--hui-radius-m);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 150ms var(--hui-ease),
    box-shadow 150ms var(--hui-ease),
    background-color 150ms ease-out,
    border-color 150ms ease-out;
}

.hui-btn--s { min-height: var(--hui-control-s); padding: 0 20px; border-radius: var(--hui-radius-s); font-size: 13px; }
.hui-btn--l { min-height: var(--hui-control-l); padding: 0 32px; border-radius: var(--hui-radius-l); font-size: 15px; }

.hui-btn--primary {
  background: var(--hui-grad-primary);
  color: #fff;
  box-shadow: var(--hui-highlight), var(--hui-shadow-contact), var(--hui-shadow-ambient);
}

.hui-btn--primary:hover {
  background: var(--hui-grad-primary-hover);
  box-shadow: var(--hui-highlight-strong), 0 2px 4px rgba(6, 21, 73, .26), 0 10px 24px rgba(6, 21, 73, .2);
  transform: translateY(-1px);
}

.hui-btn--primary:active {
  background: var(--hui-grad-primary-active);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3), var(--hui-shadow-contact-soft);
  transform: scale(var(--hui-press-scale));
}

.hui-btn--secondary {
  background: var(--hui-grad-raised);
  border: 1px solid var(--hui-border-raised);
  color: var(--hui-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), var(--hui-shadow-contact-soft);
}

.hui-btn--secondary:hover {
  border-color: #b9d2ea;
  color: #0a2a6e;
  box-shadow: 0 2px 4px rgba(6, 21, 73, .09), 0 8px 18px rgba(6, 21, 73, .07);
  transform: translateY(-1px);
}

.hui-btn--secondary:active {
  background: #eef4fa;
  box-shadow: inset 0 1px 2px rgba(6, 21, 73, .08);
  transform: scale(var(--hui-press-scale));
}

.hui-btn--quiet {
  background: transparent;
  border: 1px solid var(--hui-hairline);
  color: var(--hui-ink);
}

.hui-btn--quiet:hover {
  border-color: var(--hui-border-raised);
  background: #fbfdff;
  transform: translateY(-1px);
}

.hui-btn--quiet:active { transform: scale(var(--hui-press-scale)); }

.hui-btn:focus-visible {
  outline: none;
  box-shadow: var(--hui-highlight), var(--hui-shadow-contact), 0 0 0 2px #fff, 0 0 0 4px var(--hui-blue);
}

.hui-btn[disabled],
.hui-btn[aria-disabled="true"] {
  background: #dbe2ea;
  border-color: #dbe2ea;
  color: #9aa8b8;
  box-shadow: none;
  transform: none;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .hui-btn,
  .hui-btn:hover,
  .hui-btn:active {
    transition: none;
    transform: none;
  }
}