@import url("./design-tokens.css");

body:not(.scoreboard-only) {
  background: var(--bg-canvas);
  color: var(--text-main);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
body:not(.scoreboard-only) :is(h1, h2) {
  font-weight: 650;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
body:not(.scoreboard-only) .hero h1 {
  font-weight: 700;
}
body:not(.scoreboard-only) :is(.eyebrow, .section-title, .field-meta) {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Reusable components; existing buttons/cards receive the same foundation. */
.kt-button,
body:not(.scoreboard-only) :is(button, .button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--bg-control);
  color: var(--text-main);
  padding: 0.625rem 1rem;
  font: 500 0.8125rem/1.4 var(--font-ui);
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  transition:
    background-color 160ms,
    color 160ms,
    box-shadow 160ms,
    transform 160ms;
}
.kt-button--primary,
body:not(.scoreboard-only) :is(button.primary, .button.primary) {
  background: var(--color-primary);
  border-color: transparent;
  color: white;
}
.kt-button--danger,
body:not(.scoreboard-only)
  :is(button.danger, button.delete-tournament, a.delete-tournament) {
  background: transparent;
  border-color: rgb(187 8 11 / 0.2);
  color: var(--color-primary);
}
.kt-button:disabled,
body:not(.scoreboard-only) button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}
.kt-button:focus-visible,
body:not(.scoreboard-only) :is(button, .button):focus-visible {
  outline: 2px solid var(--color-navy);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}
@media (hover: hover) {
  .kt-button:not(:disabled):hover,
  body:not(.scoreboard-only) :is(button, .button):not(:disabled):hover {
    background: var(--bg-control-hover);
    border-color: transparent;
  }
  .kt-button--primary:not(:disabled):hover,
  body:not(.scoreboard-only)
    :is(button.primary, .button.primary):not(:disabled):hover {
    background: var(--color-primary-hover);
    color: white;
    transform: translateY(-1px);
  }
  .kt-button--danger:not(:disabled):hover,
  body:not(.scoreboard-only)
    :is(button.danger, button.delete-tournament, a.delete-tournament):not(
      :disabled
    ):hover {
    background: #fcebec;
    color: var(--color-primary-hover);
  }
}

.kt-input,
body:not(.scoreboard-only)
  :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-width: 0;
  padding: 0.6875rem 0.875rem;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--bg-control);
  color: var(--text-main);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  box-shadow: none;
  transition:
    background-color 160ms,
    border-color 160ms,
    box-shadow 160ms;
}
.kt-input::placeholder,
body:not(.scoreboard-only) :is(input, textarea)::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
.kt-input:focus,
body:not(.scoreboard-only)
  :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ):focus {
  background: var(--bg-card);
  border-color: rgb(187 8 11 / 0.35);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}
.kt-input[aria-invalid="true"],
body:not(.scoreboard-only) :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--color-primary);
}
.kt-input:focus-visible,
body:not(.scoreboard-only)
  :is(
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea
  ):focus-visible {
  outline: 2px solid var(--color-navy);
}
.kt-input:disabled,
body:not(.scoreboard-only) :is(input, select, textarea):disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.kt-helper {
  margin: 0.375rem 0 0;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* Layout primitives for the view-by-view refactor. */
.kt-shell {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: 2rem 1rem;
}
.kt-bento {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: 1.5rem;
}
@media (max-width: 800px) {
  .kt-bento {
    grid-template-columns: minmax(0, 1fr);
  }
}

.kt-card,
body:not(.scoreboard-only) :is(.card, .stat, .hero) {
  background: var(--bg-card);
  border: 0;
  border-radius: var(--radius-container);
  box-shadow: var(--shadow-surface);
}
.kt-card,
body:not(.scoreboard-only) .card {
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.kt-card--subtle {
  background: var(--bg-card-subtle);
}
.kt-badge,
body:not(.scoreboard-only) :is(.tag, .badge, .demo) {
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-card-subtle);
  color: var(--color-navy);
  padding: 0.25rem 0.625rem;
  font: 600 0.6875rem/1.4 var(--font-ui);
  letter-spacing: 0.025em;
}

/* Small, functional controls stay compact until their view is refactored. */
body:not(.scoreboard-only) button.profile-name-button {
  display: inline;
  padding: 0;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
}

@media (max-width: 750px) {
  .kt-input,
  body:not(.scoreboard-only)
    :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kt-button,
  .kt-input,
  body:not(.scoreboard-only) :is(button, .button, input, select, textarea) {
    transition: none;
    transform: none;
  }
}