/*
 * HotSpringer design tokens.
 * Brand colors come from the app: SplashBackground (#FFFAF5), the wordmark slate (#3E5F6E),
 * the tagline terracotta (#C97B68), and the logo's pool and basalt tones.
 */
:root {
  color-scheme: light dark;

  /* Brand palette */
  --cream: #fffaf5;
  --stone: #f4ede5;
  --sand: #e6dbcf;
  --slate: #3e5f6e;
  --slate-deep: #2f4a57;
  --basalt: #2e3d44;
  --pool: #5e929b;
  --copper: #c97b68;
  --copper-ink: #a2553f; /* copper darkened to meet WCAG AA for small text on cream */
  --night: #111a1e;

  /* Semantic roles */
  --bg: var(--cream);
  --bg-alt: var(--stone);
  --surface: #ffffff;
  --line: var(--sand);
  --text: #2a353a;
  --text-soft: #56646b;
  --heading: var(--basalt);
  --brand: var(--slate);
  --brand-strong: var(--slate-deep);
  --accent: var(--copper);
  --accent-text: var(--copper-ink);
  --on-brand: #fffaf5;
  --steam: var(--pool); /* cool mist; warm tones on cream read as brown */

  /* Always-dark "immersive" sections, independent of color scheme */
  --dark-bg: var(--night);
  --dark-surface: #1b272c;
  --dark-text: #e9e2da;
  --dark-text-soft: #aab7bc;
  --dark-heading: #fbf6f0;

  /* Typography: the app's wordmark uses New York (ui-serif); body matches SF Pro. No web fonts. */
  --font-serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --tracking-wide: 0.14em;

  /* Spacing */
  --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: 4.5rem;
  --space-section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --max-width: 1180px;
  --measure: 38rem;

  /* Shape and depth (radii mirror the app's 12/16/22pt cards) */
  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-soft: 0 1px 2px rgb(46 61 68 / 0.06), 0 8px 24px rgb(46 61 68 / 0.08);
  --shadow-device: 0 30px 60px -20px rgb(17 26 30 / 0.45), 0 12px 24px -12px rgb(17 26 30 / 0.3);

  /* Motion: slow and gentle, like rising steam */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 200ms;
  --duration-reveal: 900ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121a1e;
    --bg-alt: #172126;
    --surface: #1d292e;
    --line: #2c3a40;
    --text: #dfd8d0;
    --text-soft: #a3b0b5;
    --heading: #f6f0e9;
    --brand: #8fb4c2;
    --brand-strong: #a9c8d4;
    --accent: #d99582;
    --accent-text: #e0a391;
    --on-brand: #0f171a;
    --steam: var(--cream);
    --dark-bg: #0b1114;
    --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.25);
  }
}