// ─── Design Tokens ───────────────────────────────────────────────────────────
:host {
  --btn-font:        'DM Mono', 'Courier New', monospace;
  --btn-radius:      4px;
  --btn-transition:  160ms cubic-bezier(0.4, 0, 0.2, 1);

  // Size tokens
  --btn-sm-padding:  6px 14px;
  --btn-md-padding:  10px 22px;
  --btn-lg-padding:  14px 32px;
  --btn-sm-font:     0.75rem;
  --btn-md-font:     0.875rem;
  --btn-lg-font:     1rem;

  // Color tokens — override at :root level to theme globally
  --btn-primary-bg:       #0f0f0f;
  --btn-primary-color:    #f5f5f5;
  --btn-primary-border:   #0f0f0f;
  --btn-primary-hover-bg: #2a2a2a;

  --btn-ghost-bg:         transparent;
  --btn-ghost-color:      #0f0f0f;
  --btn-ghost-border:     transparent;
  --btn-ghost-hover-bg:   rgba(0, 0, 0, 0.06);

  --btn-outline-bg:       transparent;
  --btn-outline-color:    #0f0f0f;
  --btn-outline-border:   #0f0f0f;
  --btn-outline-hover-bg: #0f0f0f;
  --btn-outline-hover-color: #f5f5f5;

  display: inline-block;
}

// ─── Base ─────────────────────────────────────────────────────────────────────
.nav-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     var(--btn-font);
  font-weight:     500;
  letter-spacing:  0.04em;
  text-transform:  uppercase;
  text-decoration: none;
  border:          1.5px solid;
  border-radius:   var(--btn-radius);
  cursor:          pointer;
  white-space:     nowrap;
  outline-offset:  3px;
  transition:
    background-color var(--btn-transition),
    color            var(--btn-transition),
    border-color     var(--btn-transition),
    box-shadow       var(--btn-transition),
    transform        var(--btn-transition);

  &:focus-visible {
    outline: 2px solid currentColor;
  }

  &:active:not(.nav-btn--disabled) {
    transform: translateY(1px);
  }

  // ── Sizes ──────────────────────────────────────────────────────────────────
  &--sm {
    padding:   var(--btn-sm-padding);
    font-size: var(--btn-sm-font);
  }

  &--md {
    padding:   var(--btn-md-padding);
    font-size: var(--btn-md-font);
  }

  &--lg {
    padding:   var(--btn-lg-padding);
    font-size: var(--btn-lg-font);
  }

  // ── Variants ───────────────────────────────────────────────────────────────
  &--primary {
    background-color: var(--btn-primary-bg);
    color:            var(--btn-primary-color);
    border-color:     var(--btn-primary-border);

    &:hover:not(.nav-btn--disabled) {
      background-color: var(--btn-primary-hover-bg);
    }
  }

  &--ghost {
    background-color: var(--btn-ghost-bg);
    color:            var(--btn-ghost-color);
    border-color:     var(--btn-ghost-border);

    &:hover:not(.nav-btn--disabled) {
      background-color: var(--btn-ghost-hover-bg);
    }
  }

  &--outline {
    background-color: var(--btn-outline-bg);
    color:            var(--btn-outline-color);
    border-color:     var(--btn-outline-border);

    &:hover:not(.nav-btn--disabled) {
      background-color: var(--btn-outline-hover-bg);
      color:            var(--btn-outline-hover-color);
    }
  }

  // ── States ─────────────────────────────────────────────────────────────────
  &--active {
    box-shadow: inset 0 0 0 1.5px currentColor;
  }

  &--disabled {
    opacity: 0.4;
    cursor:  not-allowed;
    pointer-events: none;
  }

  // ── Parts ──────────────────────────────────────────────────────────────────
  &__icon {
    font-size: 1.1em;
    line-height: 1;
  }

  &__label {
    line-height: 1;
  }

  &__external-icon {
    font-size: 0.85em;
    opacity: 0.65;
    margin-left: -2px;
  }
}