/* MemoryCards design tokens */
:root {
  color-scheme: light;

  /* Colour */
  --ink: #1f2e4d;
  --ink-soft: #4b5567;
  --ink-mute: #7c8697;
  --paper: #ffffff;
  --mist: #f5f8fc;
  --mist-deep: #e9eff7;
  --line: #e3e8f0;

  --blue: #1b84ff;
  --blue-deep: #0f6fe0;
  --blue-tint: #e6f1ff;
  --purple: #7b4dff;
  --purple-tint: #eee6ff;

  --peach: #ffe8dc;
  --lavender: #eee6ff;
  --mint: #e3f6ec;
  --butter: #fff4cc;
  --rose: #ffe1e8;

  --on-dark: #ffffff;
  --on-dark-soft: rgba(255, 255, 255, 0.78);

  /* Type */
  --font: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-hero: clamp(2.4rem, 4.6vw, 4.1rem);
  --t-h2: clamp(2rem, 4vw, 3rem);
  --t-h3: clamp(1.25rem, 2vw, 1.5rem);
  --t-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;

  /* Layout */
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 1200px;
  --container-narrow: 760px;
  --section: clamp(3.5rem, 6vw, 5.5rem);   /* space above AND below every .section — see the phone value at the end of this file */
  --nav-h: 72px;
  --nav-h-min: 60px;          /* the bar's height once the page is scrolled (see the phone override in alt2.css) */
  --logo-size: 56px;          /* the logo mark in the navigation bar */
  --logo-size-footer: 30px;   /* the logo mark in the footer, independent of the nav */

  /* Shape */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(31, 46, 77, 0.04), 0 12px 32px -12px rgba(31, 46, 77, 0.14);
  --shadow-float: 0 2px 6px rgba(31, 46, 77, 0.06), 0 24px 60px -20px rgba(31, 46, 77, 0.28);
  --shadow-nav: 0 6px 30px -10px rgba(31, 46, 77, 0.18);
  --shadow-btn: 0 8px 20px -8px rgba(27, 132, 255, 0.6);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);      /* strong ease-out: entrances, UI response */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* strong ease-in-out: on-screen movement */
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;   /* explanatory crossfades only (scenes) */
  --dur-reveal: 480ms; /* scroll reveals */
}

/* ---------- Vertical rhythm on phones ----------
   --section is the padding above and below every <section class="section">, so the space you see
   between two sections is twice this number. Phones get their own, tighter value: on a small screen
   the desktop spacing reads as dead air. Change this one number to open up or close the whole page. */
@media (max-width: 960px) {
  :root { --section: 3rem; }
}