:root {
  --bg: #14110d;
  --bg-alt: #1a140d;
  --bg-elevated: #1e1710;
  --bg-muted: #241d14;
  --ink: #f7f1e6;
  --ink-soft: rgba(247, 241, 230, 0.68);
  --ink-faint: rgba(247, 241, 230, 0.44);
  --accent: #e8a153;
  --accent-deep: #b9782e;
  --accent-soft: rgba(232, 161, 83, 0.16);
  --accent-green: #8faf7c;
  --paper: #f6efe3;
  --line: rgba(255, 255, 255, 0.1);
  --success: #8faf7c;
  --danger: #e0685a;
  --amber: #e8a153;

  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  --nav-h: 76px;

  /*
   * Viewport height:
   * - Browser: 100dvh (tracks URL bar)
   * - iOS standalone PWA: JS sets --app-height to 100vh (WebKit's 100dvh
   *   is short by safe-area-inset-top on cold start — causes bottom gap)
   */
  --app-height: 100dvh;

  --font: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", "Georgia", serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-glow: 0 20px 48px rgba(0, 0, 0, 0.32);
}