/* =========================================================================
   Kitty Petting App — Design System
   Visual direction: speels & warm. Zachte crème/perzik canvas, paars-roze
   accenten, ronde vormen, vriendelijke ronde typografie. Alles met knuffel-
   factor: dikke radii, zachte schaduwen, blije micro-animaties.
   Deze file bevat design tokens (custom properties) + herbruikbare
   componentklassen. Het bouwteam hergebruikt deze klassen in de echte app.
   ========================================================================= */

/* ---------- Design tokens ---------------------------------------------- */
:root {
  /* Kleur — palet */
  --color-bg:            #fff4ec;  /* warme crème */
  --color-bg-alt:        #ffe9dc;  /* perzik voor vlakken */
  --color-surface:       #ffffff;  /* kaarten */
  --color-surface-2:     #fff8f3;  /* subtiele surface */

  --color-primary:       #b06ff2;  /* vrolijk paars */
  --color-primary-strong:#8b3ee0;
  --color-primary-soft:  #f0e0ff;

  --color-accent:        #ff5c8a;  /* hartjes-roze */
  --color-accent-soft:   #ffd9e4;

  --color-sunshine:      #ffc44d;  /* accent geel */
  --color-mint:          #4dd6a8;  /* succes/mijlpaal */
  --color-mint-soft:     #d6f7ec;

  --color-ink:           #3a2a3f;  /* donkere tekst */
  --color-ink-soft:      #6f5f74;  /* secundaire tekst */
  --color-ink-faint:     #a596ab;  /* placeholder/hint */

  --color-border:        #f0dfd4;
  --color-focus:         #8b3ee0;

  /* Kattenvacht (voor SVG-poes) */
  --cat-fur:             #ff9d5c;
  --cat-fur-dark:        #f0843d;
  --cat-belly:           #fff1e6;
  --cat-nose:            #ff8aa8;

  /* Typografie */
  --font-body: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;

  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.375rem;
  --fs-xl:   2rem;
  --fs-2xl:  3rem;
  --fs-3xl:  4.25rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-black:   800;

  --lh-tight: 1.15;
  --lh-normal: 1.5;

  /* Spacing (8pt-schaal) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radius — lekker rond */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   36px;
  --radius-pill: 999px;

  /* Schaduw — zacht & gekleurd */
  --shadow-sm:  0 2px 6px rgba(139, 62, 224, 0.08);
  --shadow-md:  0 8px 24px rgba(139, 62, 224, 0.12);
  --shadow-lg:  0 18px 48px rgba(139, 62, 224, 0.18);
  --shadow-pop: 0 10px 0 rgba(0, 0, 0, 0.06);

  /* Beweging */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med:  260ms;
  --dur-slow: 500ms;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--color-bg-alt), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, var(--color-primary-soft), transparent 55%),
    var(--color-bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); line-height: var(--lh-tight); margin: 0; }
p { margin: 0; }

button { font-family: inherit; }

/* Toegankelijke focus-ring overal */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- Layout helpers --------------------------------------------- */
.app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.stack   { display: flex; flex-direction: column; }
.stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); }
.stack-6 { gap: var(--space-6); }

.row { display: flex; align-items: center; gap: var(--space-3); }
.row-wrap { flex-wrap: wrap; }
.center { align-items: center; justify-content: center; text-align: center; }

/* ---------- Typografie-klassen ----------------------------------------- */
.display   { font-size: var(--fs-3xl); font-weight: var(--fw-black); letter-spacing: -0.02em; }
.title     { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.subtitle  { font-size: var(--fs-lg); font-weight: var(--fw-medium); color: var(--color-ink-soft); }
.lead      { font-size: var(--fs-md); color: var(--color-ink-soft); }
.muted     { color: var(--color-ink-soft); }
.faint     { color: var(--color-ink-faint); }

.gradient-text {
  background: linear-gradient(100deg, var(--color-primary-strong), var(--color-accent) 60%, var(--color-sunshine));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-bounce),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover   { filter: brightness(1.05); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active  { transform: translateY(0) scale(0.97); box-shadow: var(--shadow-sm); }

.btn--accent    { --btn-bg: var(--color-accent); }
.btn--sunshine  { --btn-bg: var(--color-sunshine); --btn-fg: var(--color-ink); }
.btn--mint      { --btn-bg: var(--color-mint); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-primary-strong);
  box-shadow: inset 0 0 0 2px var(--color-primary-soft);
}
.btn--ghost:hover { --btn-bg: var(--color-primary-soft); }

.btn--icon { padding: var(--space-3); width: 3rem; height: 3rem; border-radius: var(--radius-pill); }
.btn--sm   { padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); }
.btn--lg   { padding: var(--space-4) var(--space-7); font-size: var(--fs-lg); }
.btn--block { width: 100%; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Cards ------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
}
.card--soft   { background: var(--color-surface-2); box-shadow: var(--shadow-sm); }
.card--accent { background: var(--color-accent-soft); border-color: transparent; }
.card--mint   { background: var(--color-mint-soft); border-color: transparent; }

/* ---------- Inputs ------------------------------------------------------ */
.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-md);
  font-family: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-ink-faint); }
.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}
.label { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-ink-soft); }

/* ---------- Badges ------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}
.badge--accent   { background: var(--color-accent-soft); color: var(--color-accent); }
.badge--mint     { background: var(--color-mint-soft); color: #1c9c76; }
.badge--sunshine { background: #fff0cf; color: #a9760a; }
.badge--locked   { background: #eee6f2; color: var(--color-ink-faint); }

/* ---------- Counter / stat pill ---------------------------------------- */
.counter {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}
.counter__value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--color-primary-strong);
  font-variant-numeric: tabular-nums;
}
.counter__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.counter--pulse .counter__value { animation: count-pop var(--dur-med) var(--ease-bounce); }

/* ---------- Progress (naar volgende mijlpaal) -------------------------- */
.progress {
  width: 100%;
  height: 14px;
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width var(--dur-slow) var(--ease-out);
}

/* ---------- Toast (mijlpaal-melding) ----------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-ink);
  color: #fff;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-weight: var(--fw-bold);
  z-index: 50;
  animation: toast-in var(--dur-med) var(--ease-bounce);
}
.toast__emoji { font-size: var(--fs-lg); }

/* ---------- Cat stage --------------------------------------------------- */
.cat-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(70vw, 380px);
  aspect-ratio: 1;
  margin-inline: auto;
}
.cat-button {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.cat-button:hover  { transform: scale(1.03) rotate(-1deg); }
.cat-button:active { transform: scale(0.96); }
.cat-svg {
  width: 100%; height: 100%; overflow: visible; display: block;
  /* Zachte schaduw zodat ook de licht/wit gevachte poezen loskomen van de achtergrond */
  filter: drop-shadow(0 8px 14px rgba(139, 62, 224, 0.16));
}

/* Aai-animatie: blij wiebelen bij klik */
.cat-button.is-petting { animation: cat-wiggle var(--dur-med) var(--ease-bounce); }
@keyframes cat-wiggle {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(1.08) rotate(-4deg); }
  60%  { transform: scale(1.05) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Zwevende hartjes/emoji bij klik */
.floaty {
  position: absolute;
  left: 50%;
  top: 40%;
  font-size: 2rem;
  pointer-events: none;
  animation: floaty-up 900ms var(--ease-out) forwards;
  z-index: 5;
  will-change: transform, opacity;
}
@keyframes floaty-up {
  0%   { transform: translate(-50%, 0) scale(0.4); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--drift, 0px)), -160px) scale(1.2); opacity: 0; }
}

/* Sparkle ring bij spin */
.cat-button.is-spinning { animation: cat-spin 700ms var(--ease-out); }
@keyframes cat-spin {
  0%   { transform: rotate(0) scale(1); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ---------- Poezen-wisselaar ------------------------------------------- */
/* Pijltjes links/rechts rond de centrale (aaibare) poes. */
.cat-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
}
.cat-nav {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--color-primary-strong);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-bounce),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.cat-nav:hover  { background: var(--color-primary-soft); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cat-nav:active { transform: scale(0.94); box-shadow: var(--shadow-sm); }
.cat-nav > span { transform: translateY(-2px); } /* optisch centreren van ‹ › */

/* Naam van de gekozen poes onder de bak. */
.cat-name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--color-ink);
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Rij met keuzeknoppen (kleine swatch + naam). */
.cat-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-bounce),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.cat-chip:hover { transform: translateY(-2px); border-color: var(--color-primary-soft); }
.cat-chip.is-active {
  color: var(--color-primary-strong);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}
.cat-chip__swatch {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.06);
}
.cat-chip.is-active .cat-chip__swatch { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--color-primary); }

@media (max-width: 480px) {
  .cat-nav { width: 2.75rem; height: 2.75rem; font-size: 1.5rem; }
  .cat-chip__name { display: none; }           /* op smalle schermen alleen kleur-swatch */
  .cat-chip { padding: var(--space-2); }
}

/* ---------- Keyframes gedeeld ------------------------------------------ */
@keyframes count-pop {
  0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); }
}
@keyframes toast-in {
  0% { transform: translate(-50%, 30px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); }
}
.bob { animation: bob 3s ease-in-out infinite; }

/* ---------- Empty state ------------------------------------------------- */
.empty {
  display: grid;
  place-items: center;
  gap: var(--space-3);
  padding: var(--space-7);
  text-align: center;
  color: var(--color-ink-soft);
  background: var(--color-surface-2);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
}
.empty__emoji { font-size: var(--fs-2xl); }

/* ---------- Utilities --------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4);
}

/* ---------- Responsief -------------------------------------------------- */
@media (max-width: 640px) {
  :root { --fs-3xl: 2.75rem; --fs-2xl: 2.25rem; --fs-xl: 1.6rem; }
  .container { padding-inline: var(--space-4); }
  .toast { left: var(--space-4); right: var(--space-4); transform: none; }
  @keyframes toast-in {
    0% { transform: translateY(30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
  }
}

/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}