/* Design tokens + global reset. Loaded first. */

:root {
  --brand: #FF8C00;
  --brand-strong: #F57C00;
  --brand-deep: #E65100;
  --brand-light: #FFB74D;
  --brand-tint: #FFF3E0;

  --bg: #14100B;
  --bg-elev: #1C1712;
  --bg-elev-2: #251E16;

  --text: #F5EFE8;
  --text-soft: rgba(245, 239, 232, 0.7);
  --text-muted: rgba(245, 239, 232, 0.5);

  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: clamp(14px, 1.4vw, 17px);
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.parallax-bg {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: -1;
}

/* Screen-reader-only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Momentum scroll on iOS for containers that scroll */
#homeScreen,
.modal-screen,
.debug-overlay,
.pdf-viewer-modal {
  -webkit-overflow-scrolling: touch;
}