/**
 * Not So Bad AI — Canonical CSS Design Tokens & Utilities
 * Single source of truth for surface polarity, monochromatic ink tokens,
 * typography stacks, and L1 spatial scrims.
 */

@font-face {
  font-family: "Iowan Old Style";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Iowan Old Style"),
    local("IowanOldStyle-Roman"),
    url("/assets/fonts/iowan-old-style-regular.ttf") format("truetype");
}

@font-face {
  font-family: "Iowan Old Style";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src:
    local("Iowan Old Style Italic"),
    local("IowanOldStyle-Italic"),
    url("/assets/fonts/iowan-old-style-italic.ttf") format("truetype");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src:
    local("Inter"),
    url("/assets/fonts/inter-latin.woff2") format("woff2");
}

:root {
  /* 1. Surfaces (Polarity-Inverting Architecture) */
  --nsb-surface-stone: #F5EFE7;
  --nsb-surface-recessed: #EFE7DA;
  --nsb-surface-obsidian: #141311;

  /* 2. Daylight Polarity Ink (Acts I–III on #F5EFE7 & #EFE7DA) */
  --nsb-ink-primary: #1B1A16;
  --nsb-ink-secondary: #4F4B42;
  --nsb-ink-muted: rgba(27, 26, 22, 0.50);
  --nsb-border-light: rgba(27, 26, 22, 0.14);
  --nsb-border-header-light: rgba(27, 26, 22, 0.12);
  --nsb-header-bg-light: rgba(245, 239, 231, 0.86);

  /* 3. Nocturnal Polarity Ink (Act IV & Inverted Header on #141311) */
  --nsb-alabaster-primary: #F5EFE7;
  --nsb-alabaster-secondary: rgba(245, 239, 231, 0.74);
  --nsb-alabaster-muted: rgba(245, 239, 231, 0.60);
  --nsb-alabaster-copyright: rgba(245, 239, 231, 0.50);
  --nsb-border-dark: rgba(245, 239, 231, 0.16);
  --nsb-border-header-dark: rgba(245, 239, 231, 0.14);
  --nsb-header-bg-dark: rgba(20, 19, 17, 0.88);

  /* 4. Typography Stacks (Locked Option 1: Strictly 2 Font Families · Iowan Old Style + System Sans) */
  --nsb-font-serif: "Iowan Old Style", Palatino, Georgia, serif;
  --nsb-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;

  /* 5. L1 Spatial Background Gradients & Optical Scrims */
  --nsb-act1-stage-bg: radial-gradient(120% 100% at 68% 50%, #F8F3EC 0%, #EFE7DA 100%);
  --nsb-act3-stage-bg: radial-gradient(120% 100% at 68% 50%, #F5EFE7 0%, #EAE0D0 100%);
  --nsb-act1-text-scrim: radial-gradient(95% 95% at 28% 58%, rgba(245, 239, 231, 0.94) 0%, rgba(245, 239, 231, 0.78) 58%, rgba(245, 239, 231, 0) 100%);
  --nsb-act3-text-scrim: radial-gradient(95% 95% at 28% 55%, rgba(239, 231, 218, 0.88) 0%, rgba(239, 231, 218, 0.68) 58%, rgba(239, 231, 218, 0) 100%);

  /* 6. Layout & Grid Constants */
  --nsb-max-width: 72rem; /* 1152px (max-w-6xl) */
  --nsb-header-height: 64px;
}

/* Foundational Typography Utilities */
.font-serif,
.font-display-serif {
  font-family: var(--nsb-font-serif);
  text-wrap: balance;
}

.font-sans,
.font-body-sans {
  font-family: var(--nsb-font-sans);
  text-wrap: pretty;
}

.font-ui-sans {
  font-family: var(--nsb-font-sans);
}

/* Responsive Stage Heights & Non-Overlapping Mobile Zones */
.act1-stage {
  min-height: max(580px, calc(92svh - 64px));
}

.act2-stage {
  min-height: max(440px, 58svh);
}

.act3-stage {
  min-height: max(620px, 86svh);
}

.act4-stage {
  min-height: max(540px, 78svh);
}

@media (max-width: 767px) {
  .act1-copy-pad {
    padding-top: 280px !important;
  }
  .act3-copy-pad {
    padding-bottom: 300px !important;
  }
}

/* Early Access Request Overlay Input Tokens */
.ea-input {
  width: 100%;
  background: rgba(245, 239, 231, 0.06);
  border: 1px solid rgba(245, 239, 231, 0.24);
  color: #F5EFE7;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  outline: none;
}

.ea-input::placeholder {
  color: rgba(245, 239, 231, 0.48);
}

.ea-input:focus {
  border-color: rgba(245, 239, 231, 0.62);
  background: rgba(245, 239, 231, 0.09);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}