/**
 * components.css — TwoPoint Component Library
 * Wymaga: tokens.css
 *
 * Reużywalne klasy UI. Żadnych hardkodowanych wartości — tylko tokeny z tokens.css.
 */


/* ─────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────── */

.heading-xl {
  font-family:  var(--font-display);
  font-size:    var(--text-xl);
  font-weight:  var(--weight-thin);
  line-height:  var(--leading-tight);
  color:        var(--color-text-primary);
}

.heading-lg {
  font-family:  var(--font-display);
  font-size:    var(--text-lg);
  font-weight:  var(--weight-light);
  line-height:  var(--leading-tight);
  color:        var(--color-text-primary);
}

.body {
  font-family:  var(--font-display);
  font-size:    var(--text-sm);
  font-weight:  var(--weight-light);
  line-height:  var(--leading-normal);
  color:        var(--color-text-primary);
}

.label {
  font-family:    var(--font-label);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-light);
  letter-spacing: var(--tracking-labels);
  text-transform: uppercase;
  line-height:    var(--leading-tight);
  color:          var(--color-text-secondary);
}


/* ─────────────────────────────────────────
   BUTTON
───────────────────────────────────────── */

.btn {
  font-family:   var(--font-display);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-regular);
  line-height:   var(--leading-tight);
  color:         var(--color-interactive);
  background:    transparent;
  border:        1px solid var(--color-interactive);
  border-radius: var(--radius-pill);
  padding:       12px var(--space-6);
  cursor:        pointer;
  transition:    background 0.25s, color 0.25s, border-color 0.25s;
  display:       inline-block;
  white-space:   nowrap;
}

.btn:hover,
.btn:focus {
  background:   var(--color-interactive-hover);
  color:        var(--color-white);
  border-color: var(--color-interactive-hover);
}

/* Wariant filled */
.btn-filled {
  background:   var(--color-interactive-fill);
  color:        var(--color-interactive-text);
  border-color: var(--color-interactive-fill);
}

.btn-filled:hover,
.btn-filled:focus {
  background:   var(--color-interactive-hover);
  border-color: var(--color-interactive-hover);
}


/* ─────────────────────────────────────────
   HEADER
───────────────────────────────────────── */

.header {
  display:               grid;
  grid-template-columns: auto 1fr auto;
  align-items:           center;
  gap:                   var(--space-10);
  padding:               var(--space-3) var(--space-20);
  border-bottom:         var(--border-muted);
  position:              sticky;
  top:                   0;
  background:            var(--color-bg);
  z-index:               10;
}

.header-logo {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

.header-logo img {
  height:  52px;
  width:   auto;
  display: block;
}

.header-nav {
  display:         flex;
  justify-content: center;
  list-style:      none;
  gap:             var(--space-8);
}

.header-nav a {
  font-family:    var(--font-display);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-light);
  color:          var(--color-text-primary);
  letter-spacing: var(--tracking-normal);
}

.header-nav a:hover {
  color: var(--color-interactive-hover);
}

.header-actions {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}