/*
  Wormy homepage base: design tokens, reset, page frame and legacy element defaults.
  Split out of styles.css in M11: the homepage used ~6KB of that 60KB sheet — the rest
  styles legacy components that now live only on /android/, which still loads styles.css
  unchanged. Every declaration here is a verbatim copy, so the homepage renders
  pixel-identically (verified by full-page diff at 1440 and 390). Keep both in sync when a
  token changes.
*/

:root {
  color-scheme: light;

  /* Color roles */
  --background: #f2f1ed;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-elevated: #fff;
  --surface-hover: rgba(255, 255, 255, 0.9);
  --text-primary: #101012;
  --text-secondary: #303033;
  --text-muted: rgba(32, 32, 35, 0.66);
  --border: rgba(18, 18, 20, 0.11);
  --border-hover: rgba(18, 18, 20, 0.24);
  --accent: #ee7da6;
  --accent-hover: #d95484;
  --success: #2f8755;
  --warning: #8f5c12;
  --error: #bd3f62;

  /* Spacing: 4px base rhythm */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-xs: 0.5rem;
  --radius-sm: 0.875rem;
  --radius-md: 1.125rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2rem;
  --radius-full: 999px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(16, 16, 18, 0.06);
  --shadow-sm: 0 8px 24px rgba(16, 16, 18, 0.07);
  --shadow-md: 0 18px 48px rgba(16, 16, 18, 0.1);
  --shadow-lg: 0 32px 90px rgba(16, 16, 18, 0.14);
  --shadow-focus: 0 0 0 3px rgba(217, 84, 132, 0.24);

  /* Backdrop blur */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;
  --blur-xl: 40px;

  /* Containers */
  --container-sm: 40rem;
  --container-md: 52rem;
  --container-lg: 64rem;
  --container-xl: 77.5rem;
  --container-gutter: clamp(1rem, 3vw, 2rem);

  /* Breakpoint reference. CSS custom properties cannot drive media queries. */
  --breakpoint-sm: 30rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;

  /* Motion */
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 360ms;
  --duration-deliberate: 560ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 300;
  --z-overlay: 600;
  --z-modal: 700;
  --z-toast: 900;

  /* Typography */
  --font-display: Inter, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body: Inter, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --type-display: clamp(4.5rem, 11vw, 10rem);
  --type-h1: clamp(3.25rem, 7vw, 7rem);
  --type-h2: clamp(2.5rem, 5vw, 4.75rem);
  --type-h3: clamp(1.625rem, 2.4vw, 2.5rem);
  --type-body-lg: 1.125rem;
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-label: 0.75rem;
  --leading-display: 0.88;
  --leading-heading: 1;
  --leading-body: 1.65;
  --tracking-display: -0.075em;
  --tracking-heading: -0.045em;
  --tracking-label: 0.11em;

  /* Legacy aliases retained for the current production pages. */
  --bg: var(--background);
  --bg-soft: color-mix(in srgb, var(--background) 82%, transparent);
  --surface-strong: var(--surface-elevated);
  --surface-muted: color-mix(in srgb, var(--surface) 74%, transparent);
  --line: var(--border);
  --text: var(--text-secondary);
  --text-soft: var(--text-muted);
  --heading: var(--text-primary);
  --accent-strong: var(--accent-hover);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --mint: #c7e8d0;
  --sky: #d7d4f7;
  --shadow: 0 28px 80px rgba(20, 20, 22, 0.13);
  --shadow-soft: 0 12px 36px rgba(20, 20, 22, 0.07);
  --content-width: var(--container-xl);
  --transition: var(--duration-base) var(--ease-standard);
  --display-font: var(--font-display);
  --body-font: var(--font-body);
}

[data-theme="dark"] {
  color-scheme: dark;
  --background: #0b0c0d;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-elevated: #171719;
  --surface-hover: rgba(255, 255, 255, 0.085);
  --text-primary: #fafaf7;
  --text-secondary: #efefec;
  --text-muted: rgba(239, 239, 236, 0.62);
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.2);
  --accent: #f184ab;
  --accent-hover: #ff9fc1;
  --success: #76d49a;
  --warning: #efb866;
  --error: #ff8bab;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 10px 28px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 20px 54px rgba(0, 0, 0, 0.32);
  --shadow-lg: 0 38px 110px rgba(0, 0, 0, 0.42);
  --shadow-focus: 0 0 0 3px rgba(241, 132, 171, 0.3);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.24);
  --mint: #2f5a47;
  --sky: #4e4779;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--body-font);
  background: var(--bg);
  color: var(--text);
  transition:
    background var(--transition),
    color var(--transition);
}

[data-theme="dark"] body {
  background: var(--bg);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.page-shell {
  position: relative;
  overflow: hidden;
}

.page-shell::before,
.page-shell::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: auto;
  width: 28rem;
  height: 28rem;
  border-radius: 999px;
  filter: blur(24px);
  opacity: 0.55;
  pointer-events: none;
  animation: drift 14s ease-in-out infinite;
}

.page-shell::before {
  top: -10rem;
  left: -8rem;
  background: rgba(239, 125, 166, 0.18);
}

.page-shell::after {
  right: -10rem;
  top: 18rem;
  background: rgba(215, 212, 247, 0.3);
  animation-delay: -6s;
}

.brand-text strong,
h1,
h2,
h3 {
  font-family: var(--display-font);
  color: var(--heading);
  letter-spacing: -0.04em;
}

h1 {
  margin: 1.25rem 0 1rem;
  font-size: clamp(3rem, 7vw, 5.6rem);
  line-height: 0.93;
}

h2 {
  margin: 1rem 0 0.8rem;
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 0.98;
}

h3 {
  margin: 1rem 0 0.45rem;
  font-size: 1.32rem;
  line-height: 1.04;
}

p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-soft);
}

/* Milestone 1 removed the ambient blobs from every page */
.page-shell::before,
.page-shell::after {
  display: none;
}

/* Legacy global heading sizes below 840px, as in styles.css. The homepage overrides these
   for every heading it styles itself; kept so anything it does not override matches. */
@media (max-width: 840px) {
  h1 {
    font-size: clamp(2.7rem, 14vw, 4rem);
  }

  h2 {
    font-size: clamp(1.8rem, 10vw, 2.6rem);
  }
}