/* =========================================================
   WisoryX Design System — Colors & Type
   Cinematic aerospace minimalism.
   Derived from uploads/DESIGN-spacex.md
   ========================================================= */

/* ---------- Fonts ---------- */
/* D-DIN family, self-hosted. Open-source release. */
@font-face {
  font-family: 'D-DIN';
  src: url('fonts/D-DIN.woff2') format('woff2'),
       url('fonts/D-DIN.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'D-DIN';
  src: url('fonts/D-DIN-Bold.woff2') format('woff2'),
       url('fonts/D-DIN-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Fallback import (CDN) — remove if fonts/ is populated with licensed files */
@import url('https://fonts.cdnfonts.com/css/d-din');

:root {
  /* ====== COLOR TOKENS ====== */
  /* Primary */
  --space-black:       #000000;      /* page background — the void */
  --spectral-white:    #f0f0fa;      /* text — starlight, not pure white */
  --white-100:         #ffffff;      /* hover emphasis only */

  /* Interactive surfaces (over photography) */
  --ghost-fill:        rgba(240, 240, 250, 0.10);
  --ghost-fill-hover:  rgba(240, 240, 250, 0.20);
  --ghost-border:      rgba(240, 240, 250, 0.35);
  --ghost-border-hover:rgba(240, 240, 250, 0.60);

  /* Photography legibility */
  --overlay-50:        rgba(0, 0, 0, 0.5);
  --overlay-30:        rgba(0, 0, 0, 0.3);
  --overlay-70:        rgba(0, 0, 0, 0.7);
  --overlay-gradient:  linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);

  /* Semantic foreground / background */
  --fg1:               var(--spectral-white);
  --fg2:               rgba(240, 240, 250, 0.70);
  --fg3:               rgba(240, 240, 250, 0.45);
  --bg:                var(--space-black);
  --border:            var(--ghost-border);

  /* ====== TYPE TOKENS ====== */
  --font-display:      'D-DIN', 'DIN Next', 'Arial Narrow', Arial, Verdana, sans-serif;
  --font-body:         'D-DIN', Arial, Verdana, sans-serif;

  /* Sizes */
  --size-display:      48px;   /* 3.00rem */
  --size-h1:           36px;
  --size-h2:           24px;
  --size-body:         16px;   /* 1.00rem */
  --size-nav-bold:     13px;
  --size-nav:          12px;
  --size-caption:      12px;
  --size-micro:        10px;

  /* Line heights */
  --lh-tight:          0.94;
  --lh-display:        1.00;
  --lh-nav:            2.00;
  --lh-body:           1.60;

  /* Letter-spacing (always positive) */
  --tracking-display:  0.96px;
  --tracking-nav:      1.17px;
  --tracking-micro:    1px;

  /* ====== SPACING ====== */
  --space-1:  3px;
  --space-2:  5px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  15px;
  --space-6:  18px;
  --space-7:  20px;
  --space-8:  24px;
  --space-9:  30px;
  --space-10: 60px;
  --space-11: 120px;

  /* ====== RADII ====== */
  --radius-sharp:   0;
  --radius-hair:    4px;
  --radius-pill:    32px;

  /* ====== MOTION ====== */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:       120ms;
  --dur-base:       300ms;
  --dur-slow:       800ms;
}

/* ====== BASE ====== */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ====== SEMANTIC TYPE CLASSES ====== */
.wx-display,
h1.wx-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg1);
  margin: 0;
}

.wx-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg1);
  margin: 0;
}

.wx-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg1);
  margin: 0;
}

.wx-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-body);
  line-height: var(--lh-body);
  color: var(--fg1);
}

.wx-nav-bold {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--size-nav-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  color: var(--fg1);
}

.wx-nav {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-nav);
  line-height: var(--lh-nav);
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--fg1);
}

.wx-caption-bold {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--size-caption);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
}

.wx-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-caption);
  line-height: var(--lh-display);
  text-transform: uppercase;
}

.wx-micro {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--size-micro);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
}

/* ====== BUTTONS ====== */
.wx-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-8);
  background: var(--ghost-fill);
  border: 1px solid var(--ghost-border);
  border-radius: var(--radius-pill);
  color: var(--fg1);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--size-nav-bold);
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease),
              color var(--dur-base) var(--ease);
}
.wx-btn-ghost:hover {
  background: var(--ghost-fill-hover);
  border-color: var(--ghost-border-hover);
  color: var(--white-100);
}
.wx-btn-ghost:active {
  transform: scale(0.98);
}

/* ====== UTILITY ====== */
.wx-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-gradient);
  pointer-events: none;
}
.wx-stage {
  position: relative;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg1);
  overflow: hidden;
}