/* ============================================
   BASE — brand tokens, reset, typography
   ============================================ */

/* ============================================
   PROPORTIONAL SCALING
   The Figma design was drawn on a 1920px canvas.
   To make every dimension scale proportionally to
   the viewport, we tie the root font-size to vw
   and then express all sizes in rem.

   Convention: 1rem = 10px at exactly 1920px viewport.
   Conversion from Figma:  px / 10  →  rem
     16px  → 1.6rem
     24px  → 2.4rem
     120px → 12rem
     1720px → 172rem

   Clamp keeps it sane:
   - floor at ~7px  (≈ 1344px viewport and below)
   - ceiling at 13px (≈ 2496px viewport and above)
   ============================================ */
html {
  font-size: clamp(7px, calc(100vw / 192), 13px);
}

:root {
  /* === Backgrounds === */
  --color-deep-space: #0A0E1A;
  --color-midnight: #0D1224;
  --color-deep-navy: #08133F;

  /* === Brand gradient (logo) === */
  --color-brand-1: #1E90F1;
  --color-brand-2: #2DC5FE;
  --gradient-brand: linear-gradient(90deg, #1E90F1 0%, #2DC5FE 100%);

  /* === Neon accents (use sparingly, ≤20% of area) === */
  --color-neon-blue: #00B4FF;
  --color-neon-cyan: #00E5FF;
  --color-neon-magenta: #FF00E5;
  --color-neon-pink: #FF2D78;
  --color-neon-orange: #FF6B2D;
  --color-neon-yellow: #FFD600;
  --color-violet: #8B5CF6;
  --color-teal: #14B8A6;

  /* === Mono === */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* === Component gradients === */
  --gradient-auth-btn: linear-gradient(90deg, #6C2EFF 0%, #26ACF8 100%);

  /* === Typography === */
  --font-base: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Brand tracking spec: -3% across the board */
  --tracking-brand: -0.03em;
}

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

body {
  min-height: 100vh;
  font-size: 1.6rem;            /* = 16px at 1920 */
  font-family: var(--font-base);
  background: var(--color-deep-space);
  color: var(--color-white);
  letter-spacing: var(--tracking-brand);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
}

html, body {
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* Page scaffolding — placeholder so the navbar has context */
.page {
  min-height: 100vh;
}