/*
 * Base primitives (roadmap.md Phase 1.1) — headings, body text, buttons and form
 * controls, extracted from the vocabulary the reference implementation already
 * established (film.css/filmdetail.css's h1-h4.neu + p1-neu/p2-neu, _filter_section.css's
 * button.neu reset + checkbox/radio, shell.css's hamaca-red link-hover pattern) and
 * rebuilt on tokens.css instead of literal px/hex values.
 *
 * This is additive, not a dedup pass: film.css/filmdetail.css/_filter_section.css keep
 * their own copies of these rules for now, since those are still what actually renders
 * on obra/autor pages. The point here is that a page which only loads tokens.css +
 * base.css + shell.css (i.e. everything *not* yet ported) can use the same classes.
 * Removing the duplication in the reference files themselves is Phase 2 cleanup.
 *
 * Loaded on every page (linked from base.html, after shell.css) so it wins over
 * base.css/estils.css on load order without needing !important.
 */

/* ---- Headings ----
   Tag+class (`h1.neu`) matches how templates already write these; the bare class
   (`.h1-neu`) is added so a primitive can be applied to a non-heading element if a
   future ported page needs the style without the semantic tag. */

:where(h1).neu, .h1-neu {
  font-family: var(--font-family-base);
  color: var(--black);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-copy);
  text-align: left;
}

:where(h2).neu, .h2-neu {
  font-family: var(--font-family-base);
  color: var(--black);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-copy);
  text-align: left;
}

:where(h3).neu, .h3-neu {
  font-family: var(--font-family-base);
  color: var(--black);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-label);
  text-align: left;
}

:where(h4).neu, .h4-neu {
  font-family: var(--font-family-base);
  color: var(--black);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-h3);
  letter-spacing: var(--letter-spacing-label);
  text-align: left;
}

/* ---- Body text ---- */

.p1-neu {
  font-family: var(--font-family-base);
  color: var(--black);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-copy);
  text-align: left;
}

.p2-neu {
  font-family: var(--font-family-base);
  color: var(--black);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-small);
  letter-spacing: var(--letter-spacing-copy);
  text-align: left;
}

/* ---- Links ----
   No generic `a {}` rule exists anywhere in the reference implementation — links there
   are always styled per-component. `.link-neu` generalizes the one pattern that repeats
   across the components already built (shell.css's footer menu links, hover to
   hamaca-red, no underline) so ported pages have something to reach for; flag for
   confirmation if Figma turns out to specify a different default link treatment. */

.link-neu {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.link-neu:hover {
  color: var(--hamaca-red);
}

/* ---- Buttons ----
   Scoped to `.neu`/`.btn-neu` rather than a bare `button {}` reset (which is how
   _filter_section.css does it) so this doesn't blanket-reset Bootstrap buttons still
   in use on pages Phase 3 hasn't ported yet.
   Element qualifiers are wrapped in :where() so every primitive weighs one class:
   component stylesheets loaded later (film.css, _filter_section.css, …) must win. */

:where(button).neu, .btn-neu {
  all: unset;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-block;
  cursor: pointer;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  background: none;
  border: none;
  border-radius: var(--radius-none);
  text-decoration: none;
  box-sizing: border-box;
}

:where(button).neu:hover, .btn-neu:hover {
  cursor: pointer;
  background-color: var(--green-hover);
}

:where(button).neu:active, .btn-neu:active {
  background-color: var(--green-grey-low-light);
}

.button-with-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  height: var(--space-9);
}

.button-with-icon span {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-copy);
  text-align: left;
}

/* ---- Form controls ---- */

.input-neu {
  box-sizing: border-box;
  width: 100%;
  height: var(--space-9);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--green-grey);
  border-radius: var(--radius-none);
  background-color: transparent;
  color: var(--black);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-copy);
  text-align: left;
}

.input-neu:focus {
  outline: none;
}

.filter-checkbox, .checkbox-neu {
  flex-shrink: 0;
  position: relative;
  width: 20px;
  height: 20px;
  border: var(--border-width) solid var(--green-grey);
  border-radius: var(--radius-none);
  appearance: none;
  background-color: var(--off-white);
  cursor: pointer;
  margin-top: 0 !important;
}

.filter-checkbox:focus, .checkbox-neu:focus,
.filter-checkbox:focus-visible, .checkbox-neu:focus-visible {
  outline: none;
  box-shadow: none;
}

.filter-checkbox:checked, .checkbox-neu:checked {
  background-color: var(--off-white);
  border-color: var(--green-grey);
}

.filter-checkbox:checked::before, .checkbox-neu:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: var(--black);
  transform: translate(-50%, -50%);
}

.filter-radio, .radio-neu {
  flex-shrink: 0;
  position: relative;
  width: 20px;
  height: 20px;
  border: var(--border-width) solid var(--green-grey);
  border-radius: var(--radius-round);
  appearance: none;
  background-color: var(--off-white);
  cursor: pointer;
  margin-top: 0 !important;
}

.filter-radio:focus, .radio-neu:focus,
.filter-radio:focus-visible, .radio-neu:focus-visible {
  outline: none;
  box-shadow: none;
}

.filter-radio:checked, .radio-neu:checked {
  background-color: var(--off-white);
  border-color: var(--green-grey);
}

.filter-radio:checked::before, .radio-neu:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-round);
  background-color: var(--black);
  transform: translate(-50%, -50%);
}