@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Shantell+Sans:ital,wght@0,500;0,600;0,700;1,600&display=swap');

:root {
  --color-paper: #fbf3e4;
  --color-paper-deep: #f3e4c6;
  --color-ink: #1b1712;
  --color-ink-soft: #5a5044;
  --color-ink-mute: #8a7d6a;
  --color-red: #ff3b2f;
  --color-red-deep: #d52817;
  --color-yellow: #ffce4a;
  --color-teal: #36c2ad;
  --color-sky: #74a7ff;
  --color-coral: #ff9e86;
  --color-lilac: #c8a8ff;
  --shadow-nb: 4px 4px 0 var(--color-ink);
  --shadow-nb-sm: 3px 3px 0 var(--color-ink);
  --shadow-nb-lg: 8px 8px 0 var(--color-ink);
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-hand: 'Shantell Sans', ui-rounded, cursive;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-paper);
  color: var(--color-ink);
  min-height: 100vh;
}

.font-display {
  font-family: var(--font-display);
}

.font-hand {
  font-family: var(--font-hand);
}

.bg-paper-grid {
  background-color: var(--color-paper);
  background-image: radial-gradient(circle at 1px 1px, rgba(27, 23, 18, 0.08) 1px, transparent 0);
  background-size: 22px 22px;
}

/* Neo-brutalist primitives */
.nb-card {
  border: 2.5px solid var(--color-ink);
  box-shadow: var(--shadow-nb);
  background: #ffffff;
  border-radius: 16px;
}

.nb-card-sm {
  border: 2px solid var(--color-ink);
  box-shadow: var(--shadow-nb-sm);
  background: #ffffff;
  border-radius: 12px;
}

.nb-btn {
  font-family: var(--font-display);
  border: 2.5px solid var(--color-ink);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.12s ease;
  display: inline-flex;
  user-select: none;
}

.nb-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nb-btn-primary {
  background: var(--color-red);
  color: #ffffff;
  box-shadow: var(--shadow-nb);
}

.nb-btn-primary:not(:disabled):hover {
  box-shadow: 6px 6px 0 var(--color-ink);
  transform: translate(-2px, -2px);
}

.nb-btn-primary:not(:disabled):active {
  box-shadow: 2px 2px 0 var(--color-ink);
  transform: translate(2px, 2px);
}

.nb-btn-ghost {
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-nb-sm);
}

.nb-btn-ghost:not(:disabled):hover {
  background: #ffffff;
  transform: translate(-1px, -1px);
}

.nb-btn-ghost:not(:disabled):active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--color-ink);
}

.nb-input {
  border: 2.5px solid var(--color-ink);
  width: 100%;
  color: var(--color-ink);
  box-shadow: var(--shadow-nb-sm);
  background: #ffffff;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 15px;
  outline: none;
  transition: box-shadow 0.1s ease, background 0.1s ease;
}

.nb-input::placeholder {
  color: var(--color-ink-mute);
}

.nb-input:focus {
  box-shadow: var(--shadow-nb);
  background: #ffffff;
}

.nb-tag {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  border: 2px solid var(--color-ink);
  background: var(--color-paper);
  border-radius: 6px;
  align-items: center;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.nb-chip {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

/* Animated googly eyes */
.nb-eye-container {
  display: inline-flex;
  gap: 3.5px;
  align-items: center;
}

.nb-eye-white {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 9999px;
  background: #ffffff;
  border: 2.5px solid var(--color-ink);
  width: 24px;
  height: 24px;
}

.nb-eye-pupil {
  position: absolute;
  border-radius: 9999px;
  background: var(--color-ink);
  top: 50%;
  left: 50%;
  width: 8.5px;
  height: 8.5px;
  transform: translate(-50%, -50%) translate(1px, 2px);
  transition: transform 0.1s ease-out;
}