/*
 * HamBeat Design System 1.0
 * Canonical visual foundation for every public, host, live and operations UI.
 * Page-specific styles may compose these tokens; they must not introduce a
 * second palette, type scale, spacing scale, radius family or navigation shell.
 */
:root {
  color-scheme: light;

  /* Brand and neutral roles */
  --hb-porcelain: #f7f3ea;
  --hb-navy: #101b2b;
  --hb-cobalt: #3159d8;
  --hb-cobalt-strong: #2348bf;
  --hb-butter: #f3d36a;
  --hb-powder: #c9d8f2;
  --hb-sand: #e9e1d2;
  --hb-ink: #171a1f;
  --hb-muted: #657083;
  --hb-line: #d9dde6;
  --hb-surface: #fffdf8;
  --hb-surface-cool: #f2f5fb;

  /* Semantic roles: color is never the only state signal. */
  --hb-success: #16835b;
  --hb-success-soft: #e8f6ee;
  --hb-warning: #a66a00;
  --hb-warning-soft: #fff5d7;
  --hb-danger: #c63f4e;
  --hb-danger-soft: #fff0f1;
  --hb-info: #3159d8;
  --hb-info-soft: #eaf0ff;

  /* One 8px-derived spacing scale */
  --hb-space-1: 4px;
  --hb-space-2: 8px;
  --hb-space-3: 12px;
  --hb-space-4: 16px;
  --hb-space-5: 20px;
  --hb-space-6: 24px;
  --hb-space-7: 32px;
  --hb-space-8: 40px;
  --hb-space-9: 48px;
  --hb-space-10: 64px;
  --hb-space-11: 80px;
  --hb-space-12: 96px;

  /* Shape contrast: small controls, grouped surfaces, one expressive hero. */
  --hb-radius-xs: 6px;
  --hb-radius-sm: 10px;
  --hb-radius-md: 14px;
  --hb-radius-lg: 18px;
  --hb-radius-xl: 28px;
  --hb-radius-hero: 40px;
  --hb-radius-round: 999px;

  --hb-control-sm: 44px;
  --hb-control-md: 48px;
  --hb-control-lg: 54px;
  --hb-content-max: 1440px;
  --hb-public-max: 1280px;
  --hb-sidebar-width: 224px;

  /* Canonical type ramp from approved board 09. */
  --hb-font-family: Vazirmatn, Tahoma, sans-serif;
  --hb-font-family-latin: Arial, sans-serif;
  --hb-type-display: 32px;
  --hb-type-h1: 28px;
  --hb-type-h2: 24px;
  --hb-type-h3: 20px;
  --hb-type-body-lg: 16px;
  --hb-type-body: 14px;
  --hb-type-body-sm: 12px;
  --hb-type-caption: 11px;
  --hb-leading-display: 1.35;
  --hb-leading-heading: 1.45;
  --hb-leading-body: 1.75;
  --hb-weight-regular: 400;
  --hb-weight-medium: 500;
  --hb-weight-semibold: 600;
  --hb-weight-bold: 700;

  --hb-shadow-sm: 0 8px 24px rgba(16, 27, 43, .08);
  --hb-shadow-md: 0 22px 54px rgba(16, 27, 43, .12);
  --hb-focus: 0 0 0 3px rgba(49, 89, 216, .22);

  /* Compatibility mapping while legacy class names are retired gradually. */
  --hambeat-ink: var(--hb-ink);
  --hambeat-muted: var(--hb-muted);
  --hambeat-line: var(--hb-line);
  --hambeat-surface: var(--hb-surface);
  --hambeat-canvas: var(--hb-porcelain);
  --hambeat-purple: var(--hb-cobalt);
  --hambeat-pink: var(--hb-cobalt);
  --hambeat-blue: var(--hb-cobalt);
  --hambeat-lime: var(--hb-butter);
  --hambeat-orange: var(--hb-butter);
  --hambeat-green: var(--hb-success);
  --hambeat-red: var(--hb-danger);
  --hambeat-shadow: var(--hb-shadow-sm);
  --hambeat-radius: var(--hb-radius-lg);
}

html { background: var(--hb-porcelain); }
body.hambeat-ui {
  --hambeat-ink: var(--hb-ink);
  --hambeat-muted: var(--hb-muted);
  --hambeat-line: var(--hb-line);
  --hambeat-surface: var(--hb-surface);
  --hambeat-canvas: var(--hb-porcelain);
  --hambeat-purple: var(--hb-cobalt);
  --hambeat-pink: var(--hb-cobalt);
  --hambeat-blue: var(--hb-cobalt);
  --hambeat-lime: var(--hb-butter);
  --hambeat-orange: var(--hb-butter);
  --hambeat-green: var(--hb-success);
  --hambeat-red: var(--hb-danger);
  --hambeat-shadow: var(--hb-shadow-sm);
  --hambeat-radius: var(--hb-radius-lg);
  color: var(--hb-ink);
  background: var(--hb-porcelain);
  font-family: var(--hb-font-family);
  text-rendering: optimizeLegibility;
}

.hambeat-ui :is(button, input, textarea, select) { font: inherit; }
.hambeat-ui :is(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--hb-cobalt);
  outline-offset: 2px;
  box-shadow: var(--hb-focus);
}

.hambeat-ui :is(.hambeat-card, .hambeat-panel) {
  border-color: var(--hb-line);
  background: var(--hb-surface);
  box-shadow: none;
}

.hambeat-ui .hambeat-kicker { color: var(--hb-cobalt); }
.hambeat-ui .hambeat-subtle { color: var(--hb-muted); }

/* Canonical controls. New surfaces use hb-button directly; the hambeat-*
   selectors below remain compatibility aliases for older pages. */
.hambeat-ui .hb-button {
  min-inline-size: 0;
  min-block-size: var(--hb-control-md);
  padding-inline: var(--hb-space-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hb-space-2);
  border: 1px solid transparent;
  border-radius: var(--hb-radius-md);
  color: var(--hb-cobalt);
  background: var(--hb-surface);
  box-shadow: none;
  font: inherit;
  font-weight: var(--hb-weight-bold);
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.hambeat-ui .hb-button--primary {
  color: #fff;
  background: var(--hb-cobalt);
}
.hambeat-ui .hb-button--primary:hover:not(:disabled) { background: var(--hb-cobalt-strong); }
.hambeat-ui .hb-button--secondary {
  color: var(--hb-cobalt);
  border-color: var(--hb-powder);
  background: var(--hb-surface);
}
.hambeat-ui .hb-button--secondary:hover:not(:disabled),
.hambeat-ui .hb-button--quiet:hover:not(:disabled) { background: var(--hb-info-soft); }
.hambeat-ui .hb-button--danger {
  color: #fff;
  background: var(--hb-danger);
}
.hambeat-ui .hb-button--quiet {
  color: var(--hb-cobalt);
  background: transparent;
}
.hambeat-ui .hb-button--on-dark {
  color: var(--hb-powder);
  border-color: rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06);
}
.hambeat-ui .hb-button--on-dark:hover:not(:disabled) {
  color: #fff;
  border-color: rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .12);
}
.hambeat-ui .hb-button--icon {
  inline-size: var(--hb-control-md);
  block-size: var(--hb-control-md);
  padding: 0;
  flex: 0 0 var(--hb-control-md);
  border-radius: var(--hb-radius-md);
}
.hambeat-ui .hb-button--compact { min-block-size: var(--hb-control-sm); }
.hambeat-ui .hb-button--large { min-block-size: var(--hb-control-lg); }
.hambeat-ui .hb-button--block { inline-size: 100%; }
.hambeat-ui .hb-button:active:not(:disabled) { transform: scale(.985); }
.hambeat-ui .hb-button:disabled,
.hambeat-ui .hb-button[aria-disabled="true"] {
  opacity: .46;
  cursor: not-allowed;
  transform: none;
}

/* The legacy selector remains for compatibility, but the visible identity is HamBeat. */
.hambeat-ui .hambeat-brand { gap: var(--hb-space-2); color: var(--hb-navy); }

.hambeat-ui :is(.hambeat-button, .hambeat-button-secondary, .hambeat-icon-button) {
  min-block-size: var(--hb-control-md);
  border-radius: var(--hb-radius-md);
  box-shadow: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.hambeat-ui .hambeat-button {
  color: #fff;
  background: var(--hb-cobalt);
}
.hambeat-ui .hambeat-button:hover { background: var(--hb-cobalt-strong); }
.hambeat-ui .hambeat-button:is(.lime, .warning) {
  color: var(--hb-navy);
  background: var(--hb-butter);
}
.hambeat-ui .hambeat-button.purple { background: var(--hb-cobalt); }
.hambeat-ui .hambeat-button-secondary {
  color: var(--hb-cobalt);
  border-color: var(--hb-powder);
  background: var(--hb-surface);
}
.hambeat-ui .hambeat-icon-button {
  color: var(--hb-cobalt);
  background: var(--hb-info-soft);
}
.hambeat-ui :is(button, .hambeat-button, .hambeat-button-secondary, .hambeat-icon-button):disabled {
  opacity: .46;
  cursor: not-allowed;
  transform: none;
}

.hambeat-ui :is(.hambeat-field, .hambeat-form input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), .hambeat-form textarea, .hambeat-form select) {
  border-color: var(--hb-line);
  border-radius: var(--hb-radius-md);
  color: var(--hb-ink);
  background: var(--hb-surface);
}
.hambeat-ui :is(.hambeat-field:focus-within, .hambeat-form input:focus, .hambeat-form textarea:focus, .hambeat-form select:focus) {
  border-color: var(--hb-cobalt);
  box-shadow: var(--hb-focus);
}

.hambeat-ui :is(.hambeat-sidebar, .hb-app-sidebar) {
  inline-size: var(--hb-app-sidebar-width, var(--hb-sidebar-width));
  min-block-size: 100dvh;
  padding: var(--hb-app-sidebar-padding, var(--hb-space-5) var(--hb-space-3));
  display: flex;
  flex-direction: column;
  color: #fff;
  background: var(--hb-navy);
}
.hambeat-ui :is(.hambeat-sidebar, .hb-app-sidebar) :is(nav, .hb-app-nav) {
  display: grid;
  gap: var(--hb-app-nav-gap, 7px);
}
.hambeat-ui :is(.hambeat-sidebar, .hb-app-sidebar) :is(nav, .hb-app-nav) :is(a, button),
.hambeat-ui .hb-app-sidebar__action {
  min-block-size: var(--hb-app-nav-control-height, var(--hb-control-md));
  padding: var(--hb-space-2) var(--hb-space-3);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--hb-app-nav-radius, var(--hb-radius-md));
  color: rgba(255, 255, 255, .8);
  background: transparent;
  font: inherit;
  font-size: var(--hb-app-nav-font-size, var(--hb-type-body-sm));
  font-weight: var(--hb-weight-bold);
  line-height: 1.4;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.hambeat-ui :is(.hambeat-sidebar, .hb-app-sidebar) :is(nav, .hb-app-nav) :is(a, button) i,
.hambeat-ui .hb-app-sidebar__action i {
  inline-size: 22px;
  color: currentColor;
  font-size: var(--hb-app-nav-icon-size, 18px);
  text-align: center;
}
.hambeat-ui :is(.hambeat-sidebar, .hb-app-sidebar) :is(nav, .hb-app-nav) :is(a, button):hover,
.hambeat-ui .hb-app-sidebar__action:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}
.hambeat-ui :is(.hambeat-sidebar, .hb-app-sidebar) :is(nav, .hb-app-nav) :is(a.active, a[aria-current="page"], button.active) {
  color: var(--hb-cobalt);
  border-color: transparent;
  background: var(--hb-powder);
  box-shadow: none;
}
.hambeat-ui .hb-app-sidebar__action { margin-block-start: auto; }
.hambeat-ui .hb-app-sidebar__footer {
  margin-block-start: auto;
  padding: var(--hb-space-3);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--hb-radius-md);
  background: rgba(255, 255, 255, .06);
}

.hambeat-ui .hambeat-mobile-nav {
  border-color: var(--hb-line);
  border-radius: var(--hb-radius-lg);
  background: var(--hb-surface);
  box-shadow: var(--hb-shadow-md);
}
.hambeat-ui .hambeat-mobile-nav :is(a.active, button.active) { color: var(--hb-cobalt); }
.hambeat-ui .hambeat-mobile-nav .create {
  color: var(--hb-navy);
  background: var(--hb-butter);
}

.hambeat-ui table { color: var(--hb-ink); }
.hambeat-ui :is(th, td) { border-bottom-color: var(--hb-line); }
.hambeat-ui th { color: var(--hb-muted); }

.hambeat-ui :is(.sync-chip.warning, .health-pill.warning) {
  color: var(--hb-warning);
  background: var(--hb-warning-soft);
}
.hambeat-ui :is(.sync-chip.bad, .health-pill.unhealthy) {
  color: var(--hb-danger);
  background: var(--hb-danger-soft);
}

/* Official HamBeat identity. The mark stays identical across public, host,
   player and operations surfaces; only the inherited wordmark color changes. */
.hambeat-ui .hambeat-brand.hb-brand,
.hambeat-ui .hb-brand {
  --hb-brand-mark-size: 42px;
  min-width: max-content !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  direction: rtl;
  line-height: 1;
  text-decoration: none;
}

.hambeat-ui .hb-brand .hb-brand__mark {
  inline-size: var(--hb-brand-mark-size) !important;
  block-size: var(--hb-brand-mark-size) !important;
  flex: 0 0 var(--hb-brand-mark-size);
  display: block !important;
  border: 0;
  border-radius: calc(var(--hb-brand-mark-size) * .27);
  object-fit: contain;
}

.hambeat-ui .hb-brand .hb-brand__copy {
  min-width: 0;
  display: grid;
  justify-items: start;
  color: inherit;
  line-height: 1;
}

.hambeat-ui .hb-brand .hb-brand__copy b,
.hambeat-ui .hb-brand .hb-brand__copy small {
  display: block;
  color: inherit;
}

.hambeat-ui .hb-brand .hb-brand__copy b {
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -.04em;
}

.hambeat-ui .hb-brand .hb-brand__copy b::after {
  content: none !important;
  display: none !important;
}

.hambeat-ui .hb-brand .hb-brand__copy small {
  margin-top: 5px;
  font: 650 9px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .09em;
  opacity: .7;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hambeat-ui *, .hambeat-ui *::before, .hambeat-ui *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 760px) {
  :root { --hb-radius-hero: 28px; }
  body.hambeat-ui { padding-block-end: 88px; }
  .hambeat-ui .hambeat-brand.hb-brand,
  .hambeat-ui .hb-brand { --hb-brand-mark-size: 36px; gap: 8px; }
  .hambeat-ui .hb-brand .hb-brand__copy b { font-size: 19px; }
  .hambeat-ui .hb-brand .hb-brand__copy small { margin-top: 4px; font-size: 8px; }
  .hambeat-ui .hambeat-mobile-nav {
    inset-inline: 10px;
    inset-block-end: max(10px, env(safe-area-inset-bottom));
  }
}