/* TKN — global stylesheet (entry point)
   Tokens first, then the interactive-state classes the marketing site needs.
   Recreated from the Claude Design handoff (TKN Website.dc.html). */

@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/radius.css");
@import url("tokens/elevation.css");
@import url("tokens/base.css");

/* Genesis bundle exposed these as --duration-*; tokens use --dur-*. Alias both. */
:root {
  --duration-fast: var(--dur-fast);
  --duration-base: var(--dur-base);
}

/* ---------------------------------------------------------------- page */
.tkn-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 9999px;
  border: 3px solid var(--bg-page);
}

/* ---------------------------------------------------------------- links */
.tkn-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 120ms ease;
}
.tkn-link:hover { color: var(--text-primary); }

.tkn-link-accent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}
.tkn-link-accent:hover { color: var(--color-primary-hover); }

/* ---------------------------------------------------------------- nav pills */
.nav-pill {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 13px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  color: var(--text-secondary);
  background: transparent;
  transition: background 120ms ease, color 120ms ease;
}
.nav-pill:hover { color: var(--text-primary); }
.nav-pill.active {
  color: var(--color-primary);
  background: var(--color-primary-wash);
}
.nav-pill.active:hover { color: var(--color-primary); }

.nav-pill-mobile {
  display: block;
  padding: 11px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: var(--text-primary);
  background: transparent;
}
.nav-pill-mobile.active {
  color: var(--color-primary);
  background: var(--color-primary-wash);
}

/* ---------------------------------------------------------------- buttons */
/* Recreates the Genesis Button — primary / secondary, sm / md / lg. */
.tkn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) ease;
}
.tkn-btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.tkn-btn-md { height: 38px; padding: 0 16px; font-size: 14px; }
.tkn-btn-lg { height: 44px; padding: 0 24px; font-size: 15px; }

.tkn-btn-primary {
  background: var(--color-primary);
  color: var(--text-on-primary);
}
.tkn-btn-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-glow-primary);
  transform: translateY(-1px);
}
.tkn-btn-primary:active { transform: translateY(0); }

.tkn-btn-secondary {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.tkn-btn-secondary:hover {
  background: var(--bg-alt);
  transform: translateY(-1px);
}
.tkn-btn-secondary:active { transform: translateY(0); }

/* CTA buttons on dark navy bands */
.tkn-btn-on-dark-primary {
  background: var(--color-primary);
  color: #fff;
}
.tkn-btn-on-dark-primary:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-glow-primary);
  transform: translateY(-1px);
}
.tkn-btn-on-dark-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}
.tkn-btn-on-dark-ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------------------------------------------------------------- cards */
.card-lift {
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out),
    border-color 200ms ease;
}
.card-lift-3:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-strong);
}
.card-lift-2:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-strong);
}

/* ---------------------------------------------------------------- inputs */
.tkn-input {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.tkn-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}

.tkn-input-dark {
  font-family: var(--font-body);
  color: #fff;
  background: #11161b;
  border: 1px solid #2a323b;
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 120ms ease;
}
.tkn-input-dark:focus { border-color: var(--color-primary); }
.tkn-input-dark::placeholder { color: rgba(255, 255, 255, 0.4); }

/* ---------------------------------------------------------------- chips */
.tkn-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: var(--bg-alt);
  color: var(--gray-600);
  transition: background 120ms ease, color 120ms ease;
}
.tkn-chip:hover { background: var(--border-subtle); }
.tkn-chip.active {
  background: var(--color-primary);
  color: #fff;
}

/* ---------------------------------------------------------------- footer */
.footer-link {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 120ms ease;
}
.footer-link:hover { color: #fff; }

/* ---------------------------------------------------------------- avatar */
.tkn-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: var(--radius-full);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  overflow: hidden;
  user-select: none;
}

/* ---------------------------------------------------------------- a11y */
.tkn-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--surface-card);
  cursor: pointer;
  color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}