/* ============================================================
   SPUTNIK #1 — Design tokens
   Cold palette. Dark mode only. Space-age engineering.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700;800;900&family=Tektur:wght@400;500;600;700;800;900&family=Michroma&family=Orbitron:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap");

@font-face {
  font-family: "SN Pro";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/SNPro-Medium.ttf") format("truetype");
}

:root {
  /* Surfaces */
  --bg-void:        #000000;
  --bg-deep:        #02050C;
  --bg-panel:       #0A1428;
  --bg-hover:       #0D1F3B;
  --bg-elev:        #0F2547;

  /* Accents */
  --accent-primary: #00D4FF;
  --accent-azure:   #0099FF;
  --accent-glow:    #3DCBFF;
  --accent-depth:   #1A6BB0;
  --accent-iris:    #6FE0FF;

  /* Text */
  --fg1:        #F0F4F8;
  --fg-chrome:  #D8DEE6;
  --fg2:        #8B98AA;
  --fg3:        #5A6573;
  --fg-faint:   #364150;

  /* Lines */
  --line-1:    rgba(0, 212, 255, 0.18);
  --line-2:    rgba(0, 212, 255, 0.35);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-grid: rgba(255, 255, 255, 0.03);

  /* Semantics */
  --success: #00FF94;
  --warning: #FFB800;
  --error:   #FF3D5A;

  /* Glows */
  --glow-cyan-sm: 0 0 12px rgba(0, 212, 255, 0.35);
  --glow-cyan-md: 0 0 24px rgba(0, 212, 255, 0.40);
  --glow-cyan-lg: 0 0 48px rgba(0, 212, 255, 0.45);

  /* Motion */
  --ease-snappy: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-micro:   300ms;
  --dur-macro:   600ms;

  /* Geometry */
  --container-max: 1280px;
  --gutter: 24px;

  /* Type families */
  --font-display:      "Unbounded", "Tektur", "Michroma", "Orbitron", system-ui, sans-serif;
  --font-display-wide: "Michroma", "Tektur", "Orbitron", system-ui, sans-serif;
  --font-body:         "SN Pro", "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono:         "JetBrains Mono", ui-monospace, "Space Mono", monospace;
}

/* ---------------- Base typography ---------------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg-void);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 96px);
  line-height: .95;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-chrome);
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-chrome);
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg1);
  margin: 0;
}
p { margin: 0; }

.hud {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg2);
}
.hud-cyan { color: var(--accent-primary); }
.mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.chrome {
  background: linear-gradient(180deg, #fff 0%, #D8DEE6 35%, #6B7585 56%, #FFFFFF 66%, #8B98AA 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.6));
}

::selection { background: rgba(0, 212, 255, 0.30); color: var(--fg1); }