/* ============================================================
   Spur Robotics — Foundations
   Colors, typography, spacing, motion tokens.
   Fonts: Syne (display) + Inter (body) + JetBrains Mono (labels).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

@font-face { font-family: 'Syne'; src: url('../fonts/Syne-Regular.ttf')   format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Syne'; src: url('../fonts/Syne-Medium.ttf')    format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Syne'; src: url('../fonts/Syne-SemiBold.ttf')  format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Syne'; src: url('../fonts/Syne-Bold.ttf')      format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Syne'; src: url('../fonts/Syne-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* Brand palette */
  --black:        #0a0a0a;
  --black-light:  #111111;
  --gray-light:   #2a2a2a;
  --gray:         #c0c0c0;
  --gray-mid:     #6a6a6a;
  --white:        #f0f0f0;
  --neon:         #BFFF00;
  --neon-dim:     #8ab800;

  /* Semantic foreground / background / borders */
  --fg-1: var(--white);
  --fg-2: var(--gray);
  --fg-3: var(--gray-mid);
  --fg-accent: var(--neon);
  --bg-1: var(--black);
  --bg-2: var(--black-light);
  --border-1: var(--gray-light);
  --border-accent-soft: rgba(191, 255, 0, 0.08);
  --border-accent: rgba(191, 255, 0, 0.2);

  --selection-bg: var(--neon);
  --selection-fg: var(--black);

  /* Typography families */
  --font-display: 'Syne', 'Inter', sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --fs-hero:      clamp(2.5rem, 5.5vw, 5rem);
  --fs-h1:        clamp(2.25rem, 4vw, 3.75rem);
  --fs-h2:        clamp(1.85rem, 4vw, 3.25rem);
  --fs-h3:        clamp(1.65rem, 3vw, 2.5rem);
  --fs-h4:        1.5rem;
  --fs-body-lg:   1.25rem;
  --fs-body:      1.05rem;
  --fs-body-sm:   0.95rem;
  --fs-label:     0.85rem;
  --fs-nav:       0.9rem;
  --fs-micro:     0.75rem;
  --fs-mini:      0.68rem;

  /* Letter-spacing */
  --tracking-tight: -0.035em;
  --tracking-body:   0;
  --tracking-label:  0.14em;
  --tracking-wide:   0.16em;
  --tracking-extra:  0.18em;

  /* Line heights */
  --lh-display: 1.02;
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.55;

  /* Spacing (8px-ish scale) */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  2.5rem;
  --s-8:  3rem;
  --s-9:  4rem;
  --s-10: 6rem;
  --s-11: 8rem;

  /* Borders & radii */
  --radius-0: 0;
  --radius-1: 2px;
  --hairline: 1px solid var(--gray-light);
  --hairline-soft: 1px solid #1e1e1e;

  /* Motion */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ui: ease;
  --dur-fast: 0.2s;
  --dur-ui:   0.25s;
  --dur-med:  0.4s;
  --dur-slow: 0.8s;

  /* Shadows / glows */
  --glow-neon-soft: 0 8px 30px rgba(191, 255, 0, 0.15);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* Headlines */
.h-display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.h-display em, .h1 em, .h2 em, .h3 em, .h4 em {
  font-style: normal;
  font-weight: 500;
  color: var(--fg-accent);
}
.h-display { font-size: var(--fs-hero); line-height: var(--lh-display); }
.h1        { font-size: var(--fs-h1);   line-height: var(--lh-tight); }
.h2        { font-size: var(--fs-h2);   line-height: var(--lh-display); }
.h3        { font-size: var(--fs-h3);   line-height: var(--lh-tight); letter-spacing: -0.03em; }
.h4        { font-size: var(--fs-h4);   line-height: var(--lh-snug); letter-spacing: -0.02em; }

/* Body copy */
.p-lg, .p, .p-sm {
  font-family: var(--font-sans);
  color: var(--fg-2);
  line-height: var(--lh-normal);
  margin: 0;
}
.p-lg { font-size: var(--fs-body-lg); }
.p    { font-size: var(--fs-body); }
.p-sm { font-size: var(--fs-body-sm); }

/* Mono labels */
.label, .label-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-extra);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Wordmark */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
}