/* Shared tokens + base styles for all three WealthAi teaser directions.
   Built at 1920x1080 design size. Uses Inter + brand-blue + navy. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap");

:root {
  --blue:        #4d8df7;
  --blue-dark:   #2563c9;
  --blue-light:  #7fb0ff;
  --blue-tint:   rgba(77, 141, 247, 0.12);

  --navy-base:     #0a1628;
  --navy-surface:  #0f1f3d;
  --navy-elev:     #162544;
  --navy-deep:     #060f1c;

  --border:        rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --fg-1: #ffffff;
  --fg-2: rgba(255, 255, 255, 0.72);
  --fg-3: rgba(255, 255, 255, 0.50);
  --fg-4: rgba(255, 255, 255, 0.32);

  --success: #3fb950;
  --warning: #ffb43c;
  --danger:  #ff6b4a;

  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: "DM Serif Display", Georgia, serif;
}

/* Light mode: inverts the palette. Toggle via body.light-mode or html.light-mode. */
body.light-mode,
html.light-mode,
body.light-mode deck-stage > section,
html.light-mode deck-stage > section {
  --navy-base:     #ffffff;
  --navy-surface:  #f7f9fc;
  --navy-elev:     #ffffff;
  --navy-deep:     #eef2f7;

  --border:        rgba(10, 22, 40, 0.10);
  --border-strong: rgba(10, 22, 40, 0.22);

  --fg-1: #0a1628;
  --fg-2: rgba(10, 22, 40, 0.74);
  --fg-3: rgba(10, 22, 40, 0.54);
  --fg-4: rgba(10, 22, 40, 0.32);

  --blue:        #1e40af;
  --blue-dark:   #1e3a8a;
  --blue-light:  #2563eb;
  --blue-tint:   rgba(30, 64, 175, 0.10);
}
body.light-mode { background: #ffffff; }

/* Print respects the current mode. Dark stays dark, light stays light.
   Use Chrome's print-color-adjust so backgrounds render either way.
   Note: do NOT use `inherit` here — html/body have no parent, so `inherit`
   falls back to UA default (white) and dark-mode printing breaks. */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
  html, body { background: var(--navy-base) !important; color: var(--fg-1) !important; }
  deck-stage { background: var(--navy-base) !important; }
  deck-stage > section { background: var(--navy-base) !important; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-sans);
  background: var(--navy-base);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

deck-stage > section {
  background: var(--navy-base);
  color: var(--fg-1);
  font-family: var(--font-sans);
  overflow: hidden;
}

.tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Logo wordmark — reused everywhere */
.wai-wordmark {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--fg-1);
  line-height: 1;
}
.wai-wordmark .ai { color: var(--blue); }

/* Common nav/chrome ornaments */
.page-num {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--blue);
}

.rule {
  background: var(--border);
  height: 1px;
  width: 100%;
}

/* Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 9999px;
  background: var(--blue-tint);
  border: 1px solid rgba(77, 141, 247, 0.25);
  font-size: 20px;
  font-weight: 500;
  color: var(--blue-light);
  letter-spacing: 0.02em;
}
.chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(77, 141, 247, 0.2);
}