/* ─── DESIGN TOKENS ─────────────────────────────── */
:root {
  --navy-900: #0A0F1D;
  --navy-800: #161E42;
  --navy-700: #2A3A5E;
  --navy-600: #445B82;
  --blue-400: #92ABC7;
  --cream-100: #FFFBF2;
  --cream-200: #FFF5E1;
  --cream-300: #F4E3C9;
  --cream-400: #E9D1A7;
  --cream-500: #D8B37D;
  --amber-600: #C19354;
  --amber-700: #A6762A;
  --amber-800: #6D421A;
  --amber-900: #3D2109;
  --red-50:  #FFE1DC;
  --red-100: #FFC8C8;
  --red-200: #FFB4AA;
  --red-300: #EB8C82;
  --red-400: #D76E6E;
  --red-600: #B43C3C;
  --red-700: #9E2020;
  --red-800: #7A1414;
  --red-900: #430A0A;
  --red-950: #3D0808;
  --black: #000000;
  --white: #FFFFFF;
}

/* ─── RESET ─────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ─── DOCUMENT ──────────────────────────────────── */
html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--navy-700);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  overflow: hidden;
  position: relative;
}

/* Atmospheric glow behind envelope */
body::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--amber-600) 7%, transparent) 0%,
    color-mix(in srgb, var(--navy-700) 12%, transparent) 40%,
    transparent 70%
  );
  pointer-events: none;
}

/* Subtle vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 120% 120% at 50% 50%, transparent 50%, color-mix(in srgb, var(--black) 50%, transparent) 100%);
  pointer-events: none;
}