/* ============================================================================
   Apis Advisory — Color & Type Foundations
   Dark editorial canvas · ONE electric-blue accent · no multi-hue gradients.
   Source of truth: jack-lester-site (tailwind.config.js + src/index.css).
   Load Google Fonts before this file:
   Inter:wght@300;400;500;600;700 · JetBrains+Mono:wght@400;500;600 ·
   Space+Grotesk:wght@400;500;600;700
   ============================================================================ */

/* ── Self-hosted brand fonts (user-uploaded) ───────────────────────────────
   These replace the Google Fonts CDN delivery for the three brand families.
   TTFs are variable — weight ranges span the full axis. */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/SpaceGrotesk.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* ── Ink — backgrounds & surfaces (darkest → lightest) ─────────────────── */
  --ink-950: #08090D;   /* page background */
  --ink-900: #0B0C11;
  --ink-850: #0F1117;   /* card / surface */
  --ink-800: #13151D;
  --ink-700: #1B1E28;
  --ink-600: #272B38;   /* hairline on hover */

  /* ── Accent — single hue, electric blue ────────────────────────────────── */
  --accent:        #4F7CFF;   /* primary accent, CTAs */
  --accent-bright: #6E97FF;   /* hero focal word, hover */
  --accent-dim:    #3A63E0;   /* pressed / deep */
  --accent-soft:   rgba(79, 124, 255, 0.12);  /* tint fills, chip bg */

  /* ── Text — slate ramp on dark ─────────────────────────────────────────── */
  --text-strong: #FFFFFF;   /* headings */
  --text-body:   #CBD5E1;   /* slate-300 — primary body */
  --text-body-2: #94A3B8;   /* slate-400 — secondary body */
  --text-muted:  #64748B;   /* slate-500 — kickers, meta */
  --text-faint:  #475569;   /* slate-600 — disabled */

  /* ── Semantic ──────────────────────────────────────────────────────────── */
  --danger: #F87171;        /* red-400 — form errors */
  --selection-bg: rgba(79, 124, 255, 0.28);

  /* ── Hairlines & rules (on dark) ───────────────────────────────────────── */
  --line-faint:  rgba(255, 255, 255, 0.06);
  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --line-hover:  rgba(255, 255, 255, 0.20);

  /* ── Type families ─────────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── Fluid type scale (clamp, 375 → 1440) ──────────────────────────────── */
  --fluid-sm:   clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --fluid-base: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --fluid-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fluid-xl:   clamp(1.6rem, 1.2rem + 1.9vw, 2.6rem);
  --fluid-2xl:  clamp(2.1rem, 1.4rem + 3.4vw, 4rem);
  --fluid-3xl:  clamp(2.15rem, 1.2rem + 4.4vw, 5rem);
  --fluid-mega: clamp(3.4rem, 0.5rem + 12vw, 11rem);
  --hero-h1:    clamp(2.1rem, 0.5rem + 6.6vw, 6rem);

  /* ── Tracking ──────────────────────────────────────────────────────────── */
  --track-tightest: -0.045em;  /* large display */
  --track-tighter:  -0.03em;   /* headings */
  --track-kicker:   0.18em;    /* mono kickers */
  --track-ultrawide: 0.32em;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --max-content: 1180px;
  --max-wide:    1320px;
  --radius-card: 1rem;         /* rounded-2xl */
  --radius-field: 0.75rem;     /* rounded-xl inputs */

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Shadows / elevation ───────────────────────────────────────────────── */
  --shadow-accent: 0 8px 30px -8px rgba(79, 124, 255, 0.6);   /* primary button glow */
  --shadow-chip:   0 6px 20px -6px rgba(79, 124, 255, 0.7);   /* accent pill */
  --shadow-card:   0 30px 80px -40px rgba(0, 0, 0, 0.8);      /* form / floating card */
}

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

/* ============================================================================
   SEMANTIC TYPE — opt-in classes mirroring the site's editorial roles.
   ============================================================================ */

.display-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--hero-h1);
  line-height: 0.96;
  letter-spacing: var(--track-tightest);
  color: var(--text-strong);
}

.h1, .display-2xl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fluid-2xl);
  line-height: 1.04;
  letter-spacing: var(--track-tightest);
  color: var(--text-strong);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fluid-xl);
  line-height: 1.12;
  letter-spacing: var(--track-tighter);
  color: var(--text-strong);
}

.h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fluid-lg);
  line-height: 1.45;
  letter-spacing: var(--track-tighter);
  color: var(--text-strong);
}

.p, .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fluid-base);
  line-height: 1.6;
  color: var(--text-body-2);
}

.lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fluid-lg);
  line-height: 1.5;
  color: var(--text-body);
}

.small {
  font-family: var(--font-sans);
  font-size: var(--fluid-sm);
  line-height: 1.6;
  color: var(--text-body-2);
}

/* Mono "kicker" — section labels, indices, meta. Tabular, uppercase. */
.kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  font-feature-settings: 'tnum' 1, 'zero' 1;
  color: var(--text-muted);
}

.code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-feature-settings: 'tnum' 1;
}

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Outlined display type — the single restrained "wow" backdrop numeral. */
.text-stroke {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
  color: transparent;
}

/* Hairline divider */
.hairline {
  height: 1px;
  background: linear-gradient(to right, transparent,
    rgba(255,255,255,0.08) 18%, rgba(255,255,255,0.08) 82%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}