/* ============================================================
   ATELIER — components
   Reusable atoms built on tokens.css. Link AFTER tokens.css.
   Everything reads from semantic tokens, so all of it inherits
   the dark theme for free.
   ============================================================ */

/* ── Forms ─────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.2rem; }
.field > label {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.input {
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .72rem .85rem;
  width: 100%;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: color-mix(in srgb, var(--ink-muted) 70%, transparent); }
.input:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-wash);   /* soft jewel focus ring */
}
textarea.input { min-height: 8rem; resize: vertical; line-height: var(--leading-body); }
select.input { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) 1.15rem, calc(100% - .8rem) 1.15rem;
  background-size: .35rem .35rem, .35rem .35rem; background-repeat: no-repeat;
  color: var(--ink); padding-right: 2.5rem;
}
.field__hint { font-size: var(--text-caption); color: var(--ink-muted); }
.field--error .input { border-color: #B3261E; }
.field--error .input:focus { box-shadow: 0 0 0 3px color-mix(in srgb,#B3261E 18%, transparent); }
.field--error .field__hint { color: #B3261E; }

/* ── Tags / filter chips ───────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-body); font-size: .82rem; font-weight: var(--fw-medium);
  letter-spacing: .01em; color: var(--ink);
  padding: .35rem .75rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.tag:hover { border-color: var(--ink); }
.tag[aria-pressed="true"], .tag.is-active {
  color: var(--emerald); border-color: var(--emerald); background: var(--emerald-wash);
}
.tag-row { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Static, non-interactive label (e.g. on a work card) */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: .72rem; font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
  color: var(--ink-muted);
  padding: .25rem .55rem; border: 1px solid var(--line); border-radius: var(--radius);
}

/* ── Nav link states (animated underline + active) ─────────── */
.nav__links a:not(.btn):not(.icon-btn) { position: relative; }
.nav__links a:not(.btn):not(.icon-btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px;
  background: var(--emerald); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__links a:not(.btn):not(.icon-btn):hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__links a.is-active { color: var(--emerald); }

/* ── Icon button (e.g. theme toggle) ───────────────────────── */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { border-color: var(--ink); color: var(--emerald); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; }