/**
 * Navigation Link Component
 *
 * Surfaces:
 *   white (default)   — hover bg: ambience-200,  hover text: attitude-500,  pressed text: attitude
 *   ambience-200      — hover bg: ambience,       hover text: attitude-600,  pressed text: attitude-500
 *   ambience          — hover bg: ambience-500,   hover text: attitude-600,  pressed text: attitude-500
 *   trust             — hover bg: trust-500,      hover text: attitude,      pressed text: attitude-500
 *   trust-500         — hover bg: trust-500,      hover text: attitude,      pressed text: attitude-500
 */

/* ── Base + light-surface defaults ── */

.navigation-link {
  --nl-color:        var(--trust, #550a2d);
  --nl-bg:           transparent;
  --nl-hover-bg:     var(--ambience-200, #f3f0ed);
  --nl-hover-color:  var(--attitude-500, #cc80c8);
  --nl-active-bg:    var(--ambience-200, #f3f0ed);
  --nl-active-color: var(--attitude, #ffa0fa);
  --nl-focus-ring:   var(--accent, #fa263a);

  /* Size tokens — L default */
  --nl-px:             16px;
  --nl-py:             8px;
  --nl-font-size:      26px;
  --nl-line-height:    1.4;
  --nl-letter-spacing: -0.39px;
  --nl-gap:            12px;

  display: inline-flex;
  align-items: center;
  gap: var(--nl-gap);
  padding: var(--nl-py) var(--nl-px);
  color: var(--nl-color);
  background-color: var(--nl-bg);
  font-family: 'Bosch Sans', sans-serif;
  font-feature-settings: 'zero';
  font-size: var(--nl-font-size);
  line-height: var(--nl-line-height);
  letter-spacing: var(--nl-letter-spacing);
  text-decoration: none;
  border-radius: var(--border-radius-m, 4px);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.navigation-link:hover {
  background-color: var(--nl-hover-bg);
  color: var(--nl-hover-color);
}

.navigation-link:active {
  background-color: var(--nl-active-bg);
  color: var(--nl-active-color);
}

.navigation-link:focus-visible {
  outline: none;
  border-color: var(--nl-focus-ring);
  color: var(--nl-color);
}

.navigation-link[aria-disabled="true"] {
  opacity: var(--opacity-disabled, 0.33);
  pointer-events: none;
  cursor: default;
}

.navigation-link__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Size variants ── */

.navigation-link--size-m {
  --nl-px:             12px;
  --nl-font-size:      20px;
  --nl-line-height:    1.5;
  --nl-letter-spacing: -0.2px;
}

.navigation-link--size-s {
  --nl-px:             8px;
  --nl-font-size:      16px;
  --nl-line-height:    1.5;
  --nl-letter-spacing: -0.16px;
}

.navigation-link--size-xs {
  --nl-px:             8px;
  --nl-font-size:      14px;
  --nl-line-height:    1.5;
  --nl-letter-spacing: -0.14px;
}

/* S and XS icon-only get slightly wider horizontal padding */
.navigation-link--icon-only.navigation-link--size-s,
.navigation-link--icon-only.navigation-link--size-xs {
  --nl-px: 12px;
}

/* ── Surface auto-adapt ── */

.surface--ambience-200 .navigation-link {
  --nl-hover-bg:     var(--ambience, #ebe6e1);
  --nl-hover-color:  var(--attitude-600, #996096);
  --nl-active-bg:    var(--ambience, #ebe6e1);
  --nl-active-color: var(--attitude-500, #cc80c8);
}

.surface--ambience .navigation-link {
  --nl-hover-bg:     var(--ambience-500, #dbd4ce);
  --nl-hover-color:  var(--attitude-600, #996096);
  --nl-active-bg:    var(--ambience-500, #dbd4ce);
  --nl-active-color: var(--attitude-500, #cc80c8);
}

.surface--trust .navigation-link,
.surface--trust-500 .navigation-link {
  --nl-color:        var(--white, #ffffff);
  --nl-hover-bg:     var(--trust-500, #440824);
  --nl-hover-color:  var(--attitude, #ffa0fa);
  --nl-active-bg:    var(--trust-500, #440824);
  --nl-active-color: var(--attitude-500, #cc80c8);
  --nl-focus-ring:   var(--accent, #fa263a);
}

/* ── Explicit background overrides (same specificity as surface--, placed after) ── */

.navigation-link.navigation-link--on-white {
  --nl-color:        var(--trust, #550a2d);
  --nl-hover-bg:     var(--ambience-200, #f3f0ed);
  --nl-hover-color:  var(--attitude-500, #cc80c8);
  --nl-active-bg:    var(--ambience-200, #f3f0ed);
  --nl-active-color: var(--attitude, #ffa0fa);
  --nl-focus-ring:   var(--accent, #fa263a);
}

.navigation-link.navigation-link--on-ambience-200 {
  --nl-color:        var(--trust, #550a2d);
  --nl-hover-bg:     var(--ambience, #ebe6e1);
  --nl-hover-color:  var(--attitude-600, #996096);
  --nl-active-bg:    var(--ambience, #ebe6e1);
  --nl-active-color: var(--attitude-500, #cc80c8);
  --nl-focus-ring:   var(--accent, #fa263a);
}

.navigation-link.navigation-link--on-ambience {
  --nl-color:        var(--trust, #550a2d);
  --nl-hover-bg:     var(--ambience-500, #dbd4ce);
  --nl-hover-color:  var(--attitude-600, #996096);
  --nl-active-bg:    var(--ambience-500, #dbd4ce);
  --nl-active-color: var(--attitude-500, #cc80c8);
  --nl-focus-ring:   var(--accent, #fa263a);
}

.navigation-link.navigation-link--on-trust,
.navigation-link.navigation-link--on-trust-500 {
  --nl-color:        var(--white, #ffffff);
  --nl-hover-bg:     var(--trust-500, #440824);
  --nl-hover-color:  var(--attitude, #ffa0fa);
  --nl-active-bg:    var(--trust-500, #440824);
  --nl-active-color: var(--attitude-500, #cc80c8);
  --nl-focus-ring:   var(--accent, #fa263a);
}