/* tokens.css — Play Navigator Level Finder design tokens */

@font-face {
  font-family: "Holtwood One SC";
  src: url("assets/type/holtwood-one-sc.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core palette */
  --lnf-spruce: #12372a;
  --lnf-blue: #2e5e78;
  --lnf-orange: #f26b38;
  --lnf-ice: #eaf4f2;
  --lnf-paper: #f4ebdd;
  --lnf-graphite: #171a1c;
  --lnf-lime: #c7da52;
  --lnf-white: #ffffff;

  /* Semantic roles */
  --lnf-surface: var(--lnf-paper);
  --lnf-surface-alt: var(--lnf-ice);
  --lnf-surface-deep: var(--lnf-spruce);
  --lnf-ink: var(--lnf-graphite);
  --lnf-ink-soft: #3c4448;
  --lnf-ink-invert: var(--lnf-ice);
  --lnf-line: #cdbfa6;
  --lnf-line-strong: var(--lnf-spruce);
  --lnf-accent: var(--lnf-orange);
  --lnf-accent-cool: var(--lnf-blue);
  --lnf-accent-lime: var(--lnf-lime);
  --lnf-focus: #0b3d61;

  /* Typography */
  --lnf-title-face: "Holtwood One SC", "Arial Black", "Helvetica Neue", Impact, sans-serif;
  --lnf-body-face: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial,
    "Liberation Sans", sans-serif;

  --lnf-step-hero: clamp(2.4rem, 1.4rem + 4.6vw, 4.6rem);
  --lnf-step-h2: clamp(1.7rem, 1.2rem + 2.1vw, 2.7rem);
  --lnf-step-h3: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem);
  --lnf-step-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  --lnf-step-body: clamp(1rem, 0.96rem + 0.18vw, 1.1rem);
  --lnf-step-small: clamp(0.82rem, 0.8rem + 0.1vw, 0.92rem);

  --lnf-measure: 66ch;
  --lnf-lh-body: 1.62;
  --lnf-lh-tight: 1.18;

  /* Spacing scale (fluid) */
  --lnf-space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.3rem);
  --lnf-space-2xs: clamp(0.5rem, 0.47rem + 0.15vw, 0.6rem);
  --lnf-space-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.95rem);
  --lnf-space-sm: clamp(1rem, 0.9rem + 0.5vw, 1.4rem);
  --lnf-space-md: clamp(1.5rem, 1.3rem + 1vw, 2.4rem);
  --lnf-space-lg: clamp(2.2rem, 1.8rem + 2vw, 4rem);
  --lnf-space-xl: clamp(3rem, 2.4rem + 3vw, 6rem);

  /* Radius — only three values used across the whole site */
  --lnf-radius-s: 3px;
  --lnf-radius-m: 10px;
  --lnf-radius-l: 22px;

  /* Structure */
  --lnf-shell: 1180px;
  --lnf-shell-wide: 1440px;
  --lnf-border: 2px solid var(--lnf-line-strong);
  --lnf-border-soft: 1px solid var(--lnf-line);
  --lnf-shadow-flat: 6px 6px 0 rgba(18, 55, 42, 0.16);
  --lnf-shadow-lift: 10px 10px 0 rgba(18, 55, 42, 0.22);
}

[data-theme="dark"] {
  --lnf-surface: #171a1c;
  --lnf-surface-alt: #22292d;
  --lnf-surface-deep: #0e241c;
  --lnf-ink: #f0f7f5;
  --lnf-ink-soft: #b0bec5;
  --lnf-ink-invert: #171a1c;
  --lnf-line: #2c393f;
  --lnf-line-strong: #c7da52;
  --lnf-paper: #171a1c;
  --lnf-ice: #1a2327;
  --lnf-white: #222d32;
}

/* Floating Theme Toggle (Not in header) */
.lnf-theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--lnf-surface-deep);
  color: var(--lnf-lime);
  border: 2px solid var(--lnf-line-strong);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.2s ease, background-color 0.3s ease;
}
.lnf-theme-toggle:hover {
  transform: scale(1.1);
}

/* Header Live Search */
.lnf-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 8px;
}
.lnf-search-input {
  padding: 6px 12px 6px 30px;
  border-radius: var(--lnf-radius-s);
  border: 1px solid var(--lnf-line);
  background: var(--lnf-surface-alt);
  color: var(--lnf-ink);
  font-size: var(--lnf-step-small);
  width: 150px;
  transition: width 0.3s ease, border-color 0.2s ease;
}
.lnf-search-input:focus {
  width: 210px;
  outline: none;
  border-color: var(--lnf-accent);
}
.lnf-search-icon {
  position: absolute;
  left: 10px;
  pointer-events: none;
  font-size: 13px;
  color: var(--lnf-ink-soft);
}
.lnf-search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  max-height: 380px;
  overflow-y: auto;
  background: var(--lnf-surface);
  border: 2px solid var(--lnf-line-strong);
  border-radius: var(--lnf-radius-m);
  box-shadow: var(--lnf-shadow-lift);
  z-index: 10000;
  display: none;
}
.lnf-search-results.active {
  display: block;
}
.lnf-search-item {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--lnf-line);
  color: var(--lnf-ink);
  text-decoration: none;
  text-align: left;
}
.lnf-search-item:last-child {
  border-bottom: none;
}
.lnf-search-item:hover, .lnf-search-item:focus {
  background: var(--lnf-surface-alt);
}
.lnf-search-item__title {
  font-weight: bold;
  font-size: 0.92rem;
  color: var(--lnf-accent-cool);
}
.lnf-search-item__desc {
  font-size: 0.8rem;
  color: var(--lnf-ink-soft);
  margin-top: 2px;
}

/* Form Validation Styles */
.lnf-field__input.invalid, .lnf-field__select.invalid, .lnf-field__area.invalid {
  border-color: #e53935 !important;
  background-color: rgba(229, 57, 53, 0.05) !important;
}
.lnf-field__error {
  color: #e53935;
  font-size: 0.85rem;
  margin-top: 4px;
}