:root {
  --ui-paper: var(--paper, #f0f2f2);
  --ui-surface: var(--surface, #ffffff);
  --ui-ink: var(--ink, #1c362f);
  --ui-muted: var(--muted, #5d7c72);
  --ui-accent: var(--accent, #6c8f83);
  --ui-border: var(--border-color, #c9d7d2);
  --ui-radius: var(--radius-6, .6rem);
  --ui-radius-card: var(--radius-16, 1.6rem);
  --ui-space-10: var(--space-10, 1rem);
  --ui-space-20: var(--space-20, 2rem);
  --ui-space-30: var(--space-30, 3rem);
  --ui-font: var(--font-family, inherit);
}

.b-button,
.b-tabs__link,
.b-dropdown__toggle,
.b-menu__button,
.b-modal__close,
.b-slider__button { font: inherit; }

.b-button:focus-visible,
.b-tabs__link:focus-visible,
.b-dropdown__toggle:focus-visible,
.b-menu__button:focus-visible,
.b-modal__close:focus-visible,
.b-slider__button:focus-visible,
.b-input:focus-visible { outline: 3px solid color-mix(in srgb, var(--ui-accent) 55%, transparent); outline-offset: 3px; }

[hidden] { display: none !important; }


/* b-button */
.b-button {
  display: inline-flex;
  min-height: 4.8rem;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  padding: 1.2rem 2rem;
  border: 1px solid var(--ui-ink);
  border-radius: var(--ui-radius);
  background: var(--ui-ink);
  color: var(--ui-paper);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.b-button:hover { background: var(--ui-accent); border-color: var(--ui-accent); }
.b-button.is-outline { background: transparent; color: var(--ui-ink); }
.b-button.is-outline:hover { background: var(--ui-ink); color: var(--ui-paper); }
.b-button.is-light { border-color: var(--ui-border); background: var(--ui-surface); color: var(--ui-ink); }
.b-button.is-light:hover { background: var(--ui-border); }
.b-button:disabled, .b-button.is-disabled { cursor: not-allowed; opacity: .55; }


/* b-modal */
.b-modal { position: fixed; z-index: 100; inset: 0; display: grid; width: 100%; height: 100%; max-width: none; max-height: none; place-items: center; margin: 0; padding: 2rem; border: 0; background: rgba(20,38,33,.62); color: var(--ui-ink); }
.b-modal[hidden] { display: none; }
.b-modal__pop-up { position: relative; width: min(58rem, 100%); max-height: 100%; overflow: auto; padding: var(--ui-space-30); border-radius: var(--ui-radius-card); background: var(--ui-paper); }
.b-modal__close { position: absolute; top: 1.2rem; right: 1.2rem; display: grid; width: 4rem; height: 4rem; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 2.4rem; cursor: pointer; }


/* b-form */
.b-form { display: grid; gap: var(--ui-space-20); }
.b-form__field { display: grid; gap: .8rem; }
.b-input { width: 100%; min-height: 4.8rem; padding: 1.2rem 1.4rem; border: 1px solid var(--ui-border); border-radius: var(--ui-radius); background: var(--ui-surface); color: inherit; font: inherit; }
.b-checkbox, .b-radio { display: flex; align-items: flex-start; gap: .8rem; }
.b-checkbox__check, .b-radio__btn { width: 1.8rem; height: 1.8rem; flex: 0 0 1.8rem; margin: .15rem 0 0; accent-color: var(--ui-accent); }
.b-checkbox__label, .b-radio__text { line-height: 1.4; }