/* ============================================================
   VerSimulator — Design tokens & base styles
   ============================================================ */

/* Primary brand typeface — DM Sans (self-hosted variable font).
   Geometric, low-contrast sans. Two files cover every weight 100–1000
   plus italics, so the whole site loads from your own domain (fast,
   no Google dependency for the headline font).
   To swap in the real Geometrica Sans later, drop its files in
   assets/fonts/ and rename the family below to "Geometrica Sans". */
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/DMSans-Variable.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/DMSans-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand */
  --ink: #0A0A0B;
  --ink-soft: #2A2A2E;
  --cream: #FFFFFF;
  --cream-deep: #F4F5F7;
  --paper: #FAFAFB;
  --navy: #0F2540;
  --navy-deep: #050608;
  --teal: #0EA5A8;
  --teal-deep: #0B7F82;
  --amber: #B8763D;
  --amber-soft: #D9A36B;
  --rule: rgba(10, 10, 11, 0.09);
  --rule-strong: rgba(10, 10, 11, 0.18);
  --muted: rgba(10, 10, 11, 0.56);

  /* Type
     --sans / --display: primary geometric sans = DM Sans (self-hosted).
     --serif: companion humanist serif for editorial accents (lead, quotes). */
  --display: "DM Sans", "Jost", "Helvetica Neue", Arial, sans-serif;
  --sans: "DM Sans", "Jost", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", "Source Serif 4", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Density */
  --section-pad-y: clamp(72px, 9vw, 128px);
  --container: 1240px;
  --container-pad: clamp(20px, 4vw, 56px);
}

[data-theme="dark"] {
  --ink: #FFFFFF;
  --ink-soft: #D4D6DC;
  --cream: #0A0B0D;
  --cream-deep: #0F1114;
  --paper: #14161A;
  --navy: #1B3552;
  --navy-deep: #050608;
  --rule: rgba(255, 255, 255, 0.12);
  --rule-strong: rgba(255, 255, 255, 0.24);
  --muted: rgba(255, 255, 255, 0.58);
}

[data-density="compact"] {
  --section-pad-y: clamp(48px, 6vw, 80px);
}
[data-density="airy"] {
  --section-pad-y: clamp(96px, 12vw, 176px);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }

/* Typography */
.display {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 0.98;
  text-wrap: balance;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.lead {
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
  max-width: 60ch;
}
.label-mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Layout */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
section { padding: var(--section-pad-y) 0; position: relative; }
.section-rule { border-top: 1px solid var(--rule); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--ink);
  color: var(--cream);
}
.btn-primary:hover { background: var(--navy); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-secondary:hover { border-color: var(--ink); background: rgba(10,10,11,0.04); }
[data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,0.06); }
.btn-ghost {
  padding: 8px 0;
  border-radius: 0;
}
.btn-arrow::after {
  content: "→";
  font-family: var(--sans);
  transition: transform .2s ease;
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(14,165,168,0.18);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(14,165,168,0.18); }
  50% { box-shadow: 0 0 0 7px rgba(14,165,168,0.04); }
}

/* Utility */
.muted { color: var(--muted); }
.teal { color: var(--teal); }
.amber { color: var(--amber); }
.center { text-align: center; }
.divider {
  height: 1px;
  background: var(--rule);
  width: 100%;
}
.divider-strong { background: var(--rule-strong); }

/* Sticky/glassy nav */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  background: color-mix(in oklab, var(--cream) 78%, transparent);
  border-bottom: 1px solid var(--rule);
}

/* Selection */
::selection { background: var(--teal); color: var(--cream); }
[data-theme="dark"] ::selection { background: var(--teal); color: var(--ink); }