/* Fleet Space — Design System Tokens
 * Source of truth: tokens/fleet-tokens.json (extracted from fleet.space)
 * Surface model: DARK-FIRST. Light surfaces are available via *-light tokens
 *   for print, docs, and occasional inverted sections.
 */

/* ── Brand typefaces ───────────────────────────────────────────
 * Restart Hard — display + body (headings, marketing copy)
 * Ft System Mono — monospace + paragraph body (technical readouts)
 * Local Restart Hard files are in /fonts. Ft System Mono falls back
 * to a system monospace stack until the brand provides the face.
 */
@font-face {
  font-family: 'Restart Hard';
  src: url('./fonts/RestartHard-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Restart Hard';
  src: url('./fonts/RestartHard-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Restart Hard';
  src: url('./fonts/RestartHard-Medium.woff2') format('woff2'),
       url('./fonts/RestartHard-Medium.woff')  format('woff'),
       url('./fonts/RestartHard-Medium.otf')   format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Restart Hard';
  src: url('./fonts/RestartHard-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* Ft System Mono — paragraph + readouts (single Book weight) */
@font-face {
  font-family: 'Ft System Mono';
  src: url('./fonts/FTSystemMono-Book.woff2') format('woff2'),
       url('./fonts/FTSystemMono-Book.woff')  format('woff'),
       url('./fonts/FTSystemMono-Book.otf')   format('opentype'),
       url('./fonts/FTSystemMono-Book.ttf')   format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ────────────────────────────────────────────────────────────
   * Color — Brand (from fleet.space)
   * ────────────────────────────────────────────────────────────*/
  --fleet-primary:   #46BBED;   /* primary / accent — Fleet blue */
  --fleet-secondary: #3898EC;   /* deeper interactive blue */
  --fleet-link:      #140018;   /* near-black, slight purple cast */

  /* Beam aliases — kept for hero/SVG work that references --fleet-beam */
  --fleet-beam:      var(--fleet-primary);
  --fleet-beam-hot:  #8FD8F5;
  --fleet-beam-deep: #1B7BB5;
  --fleet-beam-glow: rgba(70,187,237,0.45);

  /* ── Surface — dark (brand default) ── */
  --fleet-bg:           #000000;
  --fleet-surface-1:    #0b0d10;
  --fleet-surface-2:    #11161a;
  --fleet-surface-3:    #181e23;
  --fleet-ink-1:        #FFFFFF;
  --fleet-ink-2:        rgba(255,255,255,0.72);
  --fleet-ink-3:        rgba(255,255,255,0.55);
  --fleet-ink-4:        rgba(255,255,255,0.35);
  --fleet-line-1:       rgba(255,255,255,0.12);
  --fleet-line-2:       rgba(255,255,255,0.06);

  /* ── Surface — light (for print, docs, occasional inverted sections) ── */
  --fleet-bg-light:        #FFFFFF;
  --fleet-surface-light-1: #F6F7F9;
  --fleet-surface-light-2: #ECEFF2;
  --fleet-surface-light-3: #DFE3E7;
  --fleet-ink-light-1:     #000000;
  --fleet-ink-light-2:     rgba(0,0,0,0.70);
  --fleet-ink-light-3:     rgba(0,0,0,0.55);
  --fleet-ink-light-4:     rgba(0,0,0,0.35);
  --fleet-line-light-1:    rgba(0,0,0,0.12);
  --fleet-line-light-2:    rgba(0,0,0,0.06);

  /* ── Velocity / heat ramp (subsurface models) ── */
  --fleet-v-0: #1b2a6b;
  --fleet-v-1: #2472c8;
  --fleet-v-2: #2fb8c6;
  --fleet-v-3: #78d66b;
  --fleet-v-4: #e8d94a;
  --fleet-v-5: #e8873a;
  --fleet-v-6: #c8322a;

  /* ── Anomaly plume (editorial accent) ── */
  --fleet-plume-0: #2a1340;
  --fleet-plume-1: #8b2a6b;
  --fleet-plume-2: #d94a7e;
  --fleet-plume-3: #ff7a4a;
  --fleet-plume-4: #ffb47a;

  /* ── Semantic ── */
  --fleet-success: #1FA56B;
  --fleet-warning: #D58B14;
  --fleet-danger:  #C73348;
  --fleet-info:    var(--fleet-primary);

  /* ────────────────────────────────────────────────────────────
   * Typography
   * ────────────────────────────────────────────────────────────*/
  --fleet-font-display:   'Restart Hard', Arial, sans-serif;        /* H1-H4, marketing */
  --fleet-font-body:      'Restart Hard', Arial, sans-serif;        /* default body */
  --fleet-font-paragraph: 'Ft System Mono', ui-monospace, 'SF Mono',
                          'JetBrains Mono', Menlo, Consolas, monospace; /* technical body, captions */
  --fleet-font-mono:      'Ft System Mono', ui-monospace, 'SF Mono',
                          'JetBrains Mono', Menlo, Consolas, monospace; /* eyebrows, codes */

  /* Scale — Fleet site is unusually tight on h1, very large on h2.
   * Tokens reflect the actual values; expressive scale below for layouts. */
  --fleet-fs-h1:   12.8px;   /* per spec — Fleet uses h1 as small overline */
  --fleet-fs-h2:   46.9333px;
  --fleet-fs-body: 12.8px;

  /* Expressive type scale (modular ~1.25) for heroes / editorial */
  --fleet-fs-10: 10px;
  --fleet-fs-12: 12px;
  --fleet-fs-13: 13px;
  --fleet-fs-14: 14px;
  --fleet-fs-16: 16px;
  --fleet-fs-18: 18px;
  --fleet-fs-22: 22px;
  --fleet-fs-28: 28px;
  --fleet-fs-36: 36px;
  --fleet-fs-47: 47px;     /* matches site h2 */
  --fleet-fs-64: 64px;
  --fleet-fs-80: 80px;
  --fleet-fs-120: 120px;

  --fleet-w-light: 300;
  --fleet-w-regular: 400;
  --fleet-w-medium: 500;
  --fleet-w-semibold: 600;

  /* ────────────────────────────────────────────────────────────
   * Spacing — base unit 4 (per spec)
   * ────────────────────────────────────────────────────────────*/
  --fleet-unit: 4px;
  --fleet-s-1:  4px;     /* 1u */
  --fleet-s-2:  8px;     /* 2u */
  --fleet-s-3:  12px;    /* 3u */
  --fleet-s-4:  16px;    /* 4u */
  --fleet-s-5:  24px;    /* 6u */
  --fleet-s-6:  32px;    /* 8u */
  --fleet-s-7:  48px;    /* 12u */
  --fleet-s-8:  64px;    /* 16u */
  --fleet-s-9:  96px;    /* 24u */
  --fleet-s-10: 128px;   /* 32u */

  /* ────────────────────────────────────────────────────────────
   * Radii — Fleet defaults to 0 (sharp), with two specific exceptions:
   *   primary button: 5px top, 0px bottom (asymmetric — brand signature)
   *   secondary button: full pill
   * ────────────────────────────────────────────────────────────*/
  --fleet-r-0:    0;
  --fleet-r-1:    2px;
  --fleet-r-2:    4px;
  --fleet-r-3:    5px;
  --fleet-r-4:    8px;
  --fleet-r-pill: 9999px;
  --fleet-r-btn-primary: 5px 5px 0 0;   /* signature asymmetric */
}

/* ── Semantic type utility classes ── */
.fleet-display-1 {
  font-family: var(--fleet-font-display);
  font-weight: var(--fleet-w-light);
  font-size: var(--fleet-fs-80);
  line-height: 1.02;
  letter-spacing: -1.6px;
}
.fleet-display-2 {
  font-family: var(--fleet-font-display);
  font-weight: var(--fleet-w-light);
  font-size: var(--fleet-fs-64);
  line-height: 1.05;
  letter-spacing: -1.2px;
}
.fleet-h1-site {
  /* Fleet site spec — small overline-style h1 */
  font-family: var(--fleet-font-mono);
  font-weight: var(--fleet-w-regular);
  font-size: var(--fleet-fs-h1);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.fleet-h2-site {
  font-family: var(--fleet-font-display);
  font-weight: var(--fleet-w-regular);
  font-size: var(--fleet-fs-h2);
  line-height: 1.05;
  letter-spacing: -0.8px;
}
.fleet-h1 {
  font-family: var(--fleet-font-display);
  font-weight: var(--fleet-w-regular);
  font-size: var(--fleet-fs-64);
  line-height: 1.05;
  letter-spacing: -1px;
}
.fleet-h2 {
  font-family: var(--fleet-font-display);
  font-weight: var(--fleet-w-regular);
  font-size: var(--fleet-fs-47);
  line-height: 1.1;
  letter-spacing: -0.6px;
}
.fleet-h3 {
  font-family: var(--fleet-font-display);
  font-weight: var(--fleet-w-medium);
  font-size: var(--fleet-fs-28);
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.fleet-h4 {
  font-family: var(--fleet-font-display);
  font-weight: var(--fleet-w-medium);
  font-size: var(--fleet-fs-22);
  line-height: 1.3;
}
.fleet-lede {
  font-family: var(--fleet-font-paragraph);
  font-weight: var(--fleet-w-regular);
  font-size: var(--fleet-fs-18);
  line-height: 1.55;
  letter-spacing: 0.1px;
}
.fleet-body {
  font-family: var(--fleet-font-paragraph);
  font-weight: var(--fleet-w-regular);
  font-size: var(--fleet-fs-14);
  line-height: 1.55;
  letter-spacing: 0.1px;
}
.fleet-small {
  font-family: var(--fleet-font-paragraph);
  font-weight: var(--fleet-w-regular);
  font-size: var(--fleet-fs-13);
  line-height: 1.5;
}
.fleet-caption {
  font-family: var(--fleet-font-mono);
  font-weight: var(--fleet-w-regular);
  font-size: var(--fleet-fs-12);
  letter-spacing: 0.4px;
}
.fleet-eyebrow {
  font-family: var(--fleet-font-mono);
  font-weight: var(--fleet-w-regular);
  font-size: var(--fleet-fs-12);
  letter-spacing: 2px;
  text-transform: uppercase;
}
.fleet-mono {
  font-family: var(--fleet-font-mono);
  font-weight: var(--fleet-w-regular);
  font-size: var(--fleet-fs-13);
  letter-spacing: 0.2px;
}

/* ── Buttons — brand-defined ── */
.fleet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fleet-s-2);
  height: 44px;
  padding: 0 var(--fleet-s-5);
  font-family: var(--fleet-font-mono);
  font-size: var(--fleet-fs-13);
  font-weight: var(--fleet-w-regular);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.fleet-btn:active { transform: translateY(1px); }

/* Primary — pill, Fleet Blue background, black text */
.fleet-btn--primary {
  background: var(--fleet-primary);
  color: #000;
  border-radius: var(--fleet-r-pill);
}
.fleet-btn--primary:hover { background: var(--fleet-secondary); color: #fff; }

/* Secondary — pill outline. White on dark (default brand). For light, add .is-on-light. */
.fleet-btn--secondary {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: var(--fleet-r-pill);
}
.fleet-btn--secondary.is-on-light {
  color: #000;
  border-color: #000;
}
.fleet-btn--secondary:hover { background: rgba(255,255,255,0.1); }
.fleet-btn--secondary.is-on-light:hover { background: rgba(0,0,0,0.05); }