/* Hallmark · shape: the seam, you on the left, them on the right, the shared moment across the line · genre: playful · theme: custom (adapted from "Ours") · job: play · idea: "two products, one shelf, the healthier number wins" · vibe: "two colours, one line, fair and frank" · v2.0.0 */
/* Seam design language: shared by nutri-duel and the (considering) couples budget app.
 * Two sides and one line between them: "you" in marigold on the left, "them" in sky on the right,
 * shared things in ink across the seam, cool paper underneath.
 * Adapted from the Hallmark example "Ours" (usehallmark.com/made/custom-couples-budget, MIT, custom mode).
 * Fonts: Funnel Display 700 (display), Onest 400/700 (body), self-hosted in fonts/ (fonts.css).
 * Every colour and font goes through these tokens; no literal colours past this block. */
:root {
  --color-paper: oklch(97.6% 0.006 240);
  --color-paper-2: oklch(94.4% 0.01 240);
  --color-paper-3: oklch(90.8% 0.013 240);
  --color-ink: oklch(22% 0.035 262);
  --color-ink-2: oklch(35% 0.032 262);
  --color-muted: oklch(47% 0.024 262);
  --color-rule: oklch(86% 0.014 240);
  --color-you: oklch(83.5% 0.135 80);      /* marigold */
  --color-you-2: oklch(90% 0.085 84);
  --color-them: oklch(80% 0.085 232);      /* sky */
  --color-them-2: oklch(88.5% 0.05 232);
  --color-accent: oklch(46% 0.17 262);
  --color-focus: oklch(46% 0.19 262);
  --color-error: oklch(52% 0.19 27);
  --color-success: oklch(50% 0.12 150);

  --font-display: "Funnel Display", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Onest", ui-sans-serif, system-ui, sans-serif;

  --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.75rem; --text-2xl: clamp(2rem, 5vw, 3.25rem);
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem;
  --radius-card: 14px; --radius-inner: 8px; --radius-pill: 999px; --rule-hair: 1px;
  --dur-short: 160ms; --dur-med: 420ms; --ease: cubic-bezier(.2,.7,.2,1);
  --container: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-md)/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased; caret-color: var(--color-accent);
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.05; margin: 0; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
::selection { background: var(--color-you); color: var(--color-ink); }
html { scrollbar-color: var(--color-ink-2) var(--color-paper-2); }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 48px; padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill);
  background: var(--color-ink); color: var(--color-paper);
  font: 700 var(--text-md)/1 var(--font-body); cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-short) linear, transform var(--dur-short) var(--ease);
}
.btn:hover { background: var(--color-ink-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn--quiet { background: transparent; color: var(--color-ink); }
.btn--quiet:hover { background: color-mix(in oklab, var(--color-ink) 10%, transparent); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .btn:active { transform: none; }
}