/* Couple — design tokens (extends tgplay portal tokens) */
:root {
  /* primary hue — couple uses warm pink/magenta vs portal's purple */
  --hue-primary: 340;
  --hue-secondary: 18;     /* warm amber for streak / fire */
  --hue-cool: 210;         /* cool blue for partner / "they" */

  /* ink — same near-blacks as portal */
  --ink-0: oklch(0.11 0.018 320);
  --ink-1: oklch(0.15 0.02 320);
  --ink-2: oklch(0.19 0.022 320);
  --ink-3: oklch(0.24 0.024 320);
  --ink-4: oklch(0.3 0.028 320);
  --ink-5: oklch(0.4 0.03 320);

  --text-1: oklch(0.98 0.005 320);
  --text-2: oklch(0.78 0.015 320);
  --text-3: oklch(0.58 0.02 320);
  --text-4: oklch(0.45 0.02 320);

  /* brand */
  --brand: oklch(0.7 0.18 var(--hue-primary));
  --brand-hi: oklch(0.8 0.16 var(--hue-primary));
  --brand-lo: oklch(0.5 0.2 var(--hue-primary));
  --brand-glow: oklch(0.7 0.2 var(--hue-primary) / 0.4);

  --warm: oklch(0.74 0.18 var(--hue-secondary));
  --warm-glow: oklch(0.74 0.18 var(--hue-secondary) / 0.4);
  --cool: oklch(0.7 0.14 var(--hue-cool));
  --cool-glow: oklch(0.7 0.14 var(--hue-cool) / 0.4);

  --ok: oklch(0.78 0.16 150);
  --warn: oklch(0.78 0.18 70);

  /* you / partner — used to color answer cards */
  --you: var(--brand);
  --partner: var(--cool);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --shadow-card: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 12px 40px -12px oklch(0 0 0 / 0.6);
  --shadow-pop: 0 1px 0 oklch(1 0 0 / 0.06) inset, 0 30px 80px -20px oklch(0 0 0 / 0.8);

  --tap: cubic-bezier(0.2, 0.9, 0.2, 1);
  --soft: cubic-bezier(0.4, 0, 0.2, 1);

  --gap: 16px;
  --page-pad: 32px;
  --sidebar-w: 240px;
  --shell-h: 56px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--ink-0);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

body {
  background-image:
    radial-gradient(60% 40% at 85% -10%, oklch(0.5 0.22 var(--hue-primary) / 0.22), transparent 60%),
    radial-gradient(50% 35% at 5% 5%, oklch(0.5 0.2 calc(var(--hue-primary) - 60) / 0.14), transparent 60%),
    radial-gradient(40% 30% at 50% 110%, oklch(0.5 0.18 var(--hue-secondary) / 0.1), transparent 60%);
  background-attachment: fixed;
  overflow-x: hidden;
}

button, input, textarea, select {
  font-family: inherit; color: inherit; font-size: inherit;
}
button { cursor: pointer; border: none; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }

input:focus, textarea:focus { outline: none; }

/* shared */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  background: var(--brand);
  color: white;
  border-radius: 12px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 24px -10px var(--brand-glow);
  transition: transform .12s var(--tap), background .15s, box-shadow .15s;
  min-height: 44px;
}
.btn-primary:hover { background: var(--brand-hi); transform: translateY(-1px); box-shadow: 0 14px 32px -10px var(--brand-glow); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { background: var(--ink-3); color: var(--text-3); box-shadow: none; cursor: not-allowed; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  background: oklch(1 0 0 / 0.06);
  color: var(--text-1);
  border-radius: 12px;
  font-size: 14px; font-weight: 500;
  transition: background .15s;
  min-height: 44px;
  border: 1px solid oklch(1 0 0 / 0.05);
}
.btn-ghost:hover { background: oklch(1 0 0 / 0.12); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  background: oklch(1 0 0 / 0.06);
  border: 1px solid oklch(1 0 0 / 0.06);
  border-radius: 999px;
  font-size: 12px; font-weight: 500; color: var(--text-2);
}
.chip--brand { background: oklch(0.55 0.2 var(--hue-primary) / 0.18); color: var(--brand-hi); border-color: oklch(0.55 0.2 var(--hue-primary) / 0.25); }
.chip--warm { background: oklch(0.55 0.2 var(--hue-secondary) / 0.18); color: var(--warm); border-color: oklch(0.55 0.2 var(--hue-secondary) / 0.25); }
.chip--cool { background: oklch(0.55 0.18 var(--hue-cool) / 0.18); color: var(--cool); border-color: oklch(0.55 0.18 var(--hue-cool) / 0.25); }

.surface {
  background: var(--ink-1);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-lg);
}

.h-display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.h-serif { font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.015em; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@keyframes float-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes heart-beat { 0%, 100% { transform: scale(1); } 14%, 42% { transform: scale(1.15); } 28% { transform: scale(1); } }

.fade-in { animation: float-up .4s var(--soft) both; }

::selection { background: oklch(0.55 0.22 var(--hue-primary) / 0.4); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 999px; border: 2px solid var(--ink-0); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }