/* TraumaBond design tokens — warm cream + dusty blue + muted rose */
:root {
  /* Surfaces */
  --tb-cream: #F5EDE4;
  --tb-cream-2: #EFE4D6;
  --tb-paper: #FBF5EC;
  --tb-ink: #2E2A28;
  --tb-ink-2: #5B524C;
  --tb-muted: #8A7F77;

  /* Accents pulled from the reference heart illustration */
  --tb-blue: #8AA7BF;       /* dusty blue heart */
  --tb-blue-deep: #5D7E9B;
  --tb-blue-soft: #C9D8E5;

  --tb-rose: #C78B8C;        /* muted rose heart */
  --tb-rose-deep: #9F6264;
  --tb-rose-soft: #E8C9CA;

  --tb-cream-hi: #FFF9F0;
  --tb-line: rgba(46, 42, 40, 0.12);
  --tb-line-strong: rgba(46, 42, 40, 0.22);

  /* Type */
  --tb-serif: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
  --tb-sans: 'Nunito', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --tb-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Radius + shadow */
  --tb-r: 18px;
  --tb-r-lg: 26px;
  --tb-shadow-1: 0 1px 2px rgba(46,42,40,0.06), 0 6px 20px rgba(46,42,40,0.06);
  --tb-shadow-2: 0 2px 6px rgba(46,42,40,0.08), 0 20px 40px rgba(46,42,40,0.1);
}

*,*::before,*::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--tb-cream);
  color: var(--tb-ink);
  font-family: var(--tb-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }

/* subtle paper grain */
.tb-paper-grain {
  position: relative;
}
.tb-paper-grain::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(46,42,40,0.035) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  border-radius: inherit;
}

/* Wobble / float keyframes for cute animations */
@keyframes tb-float {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-4px) rotate(-1deg); }
}
@keyframes tb-wobble {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(3deg); }
}
@keyframes tb-pulse {
  0%,100% { transform: scale(1); opacity: 0.9; }
  50%     { transform: scale(1.08); opacity: 1; }
}
@keyframes tb-heartbeat {
  0%, 28%, 70%, 100% { transform: scale(1); }
  14% { transform: scale(1.18); }
  42% { transform: scale(1.05); }
}
@keyframes tb-drift-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tb-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes tb-tear {
  0%   { transform: translateY(-4px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

.tb-drift-in { animation: tb-drift-in 0.45s ease both; }

/* Scrollbar — keep it discreet */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(46,42,40,0.15); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* Range input styling for Tweaks */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; background: transparent;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 3px; background: var(--tb-line-strong); border-radius: 99px;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 99px;
  background: var(--tb-rose-deep); margin-top: -6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}