@import './tokens.css';

html,
body,
#app {
  margin: 0;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-ui);
  color: var(--color-text);
  background: #f7f4ef;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

.ui-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--elev-1);
}

.ui-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.v-btn {
  transition: filter var(--ui-fast), transform var(--ui-fast), box-shadow var(--ui-fast);
}

.v-btn:hover {
  filter: brightness(1.03);
}

.v-btn:active {
  transform: translateY(1px);
}

.v-btn:focus-visible,
.v-field:focus-within,
.v-selection-control:focus-within {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.radio-button-square {
  position: relative;
  display: inline-block;
  cursor: pointer;
  user-select: none;
}

.radio-button-square input[type='radio'] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  cursor: pointer;
}

.radio-button-square span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 50px;
  padding: 0 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-2);
  box-sizing: border-box;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  transition: all var(--ui-med);
}

.radio-button-square input[type='radio']:checked + span {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgb(198 106 43 / 35%);
  color: white;
}

.radio-button-square input[type='radio']:focus-visible + span {
  outline: none;
  box-shadow: var(--shadow-focus);
}