/* Future Corp DS tokens — inlined locally to avoid the flaky @import chain in the DS styles.css. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
/* Future Corp — Color tokens
 * Navy-led, blue→violet signature. Deep navy base carries the system; electric
 * blue is the primary action; violet is its gradient partner for the one
 * signature element per screen; cyan is rare, for live status / pulse details.
 * Borders are low-opacity off white.
 */
:root {
  /* ---- Off white (light ink / surfaces on dark) ---- */
  --ow-100: #F7F8FC;   /* brightest off white (cool) */
  --ow-200: #EEF0F8;
  --ow-300: #E1E4F0;
  --ow-rgb: 247, 248, 252; /* @kind other */ /* base for low-opacity hairlines/overlays */

  /* ---- Navy scale (deep, blue-tinted base — never pure black) ---- */
  --navy-950: #06070F;  /* deepest base */
  --navy-900: #0A0C18;  /* page base */
  --navy-850: #0E1122;  /* surface 1 */
  --navy-800: #141833;  /* surface 2 (cards) */
  --navy-750: #1B2042;  /* surface 3 (raised) */
  --navy-700: #232A54;  /* surface 4 / inputs */
  --navy-600: #36406B;  /* muted lines on dark */
  --navy-500: #555F88;  /* disabled / faint text */

  /* ---- Electric blue (primary action + key emphasis) ---- */
  --blue-600: #2A57E6;
  --blue-500: #3D6CFF;   /* core electric blue */
  --blue-400: #6E91FF;
  --blue-300: #A6BCFF;
  --blue-rgb: 61, 108, 255; /* @kind other */

  /* ---- Violet (gradient partner — the signature blue→violet) ---- */
  --violet-600: #6B47FF;
  --violet-500: #835AFF;  /* core violet */
  --violet-400: #A285FF;
  --violet-300: #C5B4FF;
  --violet-rgb: 131, 90, 255; /* @kind other */

  /* ---- Cyan (live status, pulse, rare highlight) ---- */
  --cyan-500: #2ED3EE;  /* core signal cyan */
  --cyan-400: #6FE4F5;
  --cyan-rgb: 46, 211, 238; /* @kind other */

  /* ---- Signature gradient ---- */
  --grad-brand: linear-gradient(135deg, var(--blue-500) 0%, var(--violet-500) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(var(--blue-rgb), 0.16) 0%, rgba(var(--violet-rgb), 0.16) 100%);

  /* ===================== Semantic aliases ===================== */
  /* Backgrounds & surfaces */
  --bg-base: var(--navy-900);
  --bg-deep: var(--navy-950);
  --surface-1: var(--navy-850);
  --surface-card: var(--navy-800);
  --surface-raised: var(--navy-750);
  --surface-input: var(--navy-700);

  /* Text on dark */
  --text-primary: var(--ow-100);
  --text-secondary: rgba(var(--ow-rgb), 0.66);
  --text-muted: rgba(var(--ow-rgb), 0.42);
  --text-faint: rgba(var(--ow-rgb), 0.26);
  --text-on-accent: #FFFFFF;

  /* Accents */
  --accent: var(--blue-500);
  --accent-strong: var(--blue-600);
  --accent-soft: rgba(var(--blue-rgb), 0.14);
  --accent-2: var(--violet-500);
  --accent-2-soft: rgba(var(--violet-rgb), 0.14);
  --live: var(--cyan-500);
  --live-soft: rgba(var(--cyan-rgb), 0.16);

  /* Borders — near-invisible hairlines */
  --border-hairline: rgba(var(--ow-rgb), 0.08);
  --border-soft: rgba(var(--ow-rgb), 0.12);
  --border-strong: rgba(var(--ow-rgb), 0.20);
  --border-accent: rgba(var(--blue-rgb), 0.55);

  /* Focus ring */
  --focus-ring: rgba(var(--blue-rgb), 0.55);

  /* Light-mode ink (for specimen cards / docs on off white) */
  --ink-900: var(--navy-900);
  --ink-600: rgba(10, 12, 24, 0.64);
  --ink-400: rgba(10, 12, 24, 0.40);
}

/* Future Corp — Typography tokens
 * Display: Space Grotesk (tight tracking, confident).
 * Body: Hanken Grotesk (clean neutral).
 * Mono: Space Mono (uppercase eyebrow labels + data captions, wide tracking).
 */
:root {
  /* Families */
  --font-display: 'Space Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (fluid-friendly fixed px; 1.25 major-third-ish, widening at top) */
  --text-display-2xl: 88px;  /* hero */
  --text-display-xl: 68px;
  --text-display-lg: 52px;
  --text-h1: 40px;
  --text-h2: 32px;
  --text-h3: 25px;
  --text-h4: 20px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-sm: 14px;
  --text-xs: 13px;
  --text-eyebrow: 12px;  /* mono uppercase label */

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line heights */
  --leading-tight: 1.04;   /* large display */
  --leading-snug: 1.16;    /* headings */
  --leading-normal: 1.5;   /* body */
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-display: -0.03em;  /* tight on big display */
  --tracking-heading: -0.015em;
  --tracking-body: 0em;
  --tracking-eyebrow: 0.22em;   /* wide mono labels */
  --tracking-caption: 0.08em;
}

/* Future Corp — Spacing & layout tokens
 * 4px base grid. Generous negative space; bento layouts.
 */
:root {
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1320px;
  --gutter: 24px;
  --section-y: 120px;   /* vertical rhythm between major sections */
  --bento-gap: 20px;
}

/* Future Corp — Radii, borders, shadows, blur, motion
 * Soft, subtle shadows. Consistent radius system. Glass + blur for nav and
 * featured pricing. Slow, restrained motion.
 */
:root {
  /* Radius scale */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;   /* default card */
  --radius-xl: 28px;   /* large bento */
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* Border widths */
  --border-width: 1px;
  --border-width-accent: 1.5px;

  /* Shadows — soft, low, on near-black so kept subtle */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 1px 0 rgba(var(--ow-rgb), 0.04) inset,
                 0 20px 48px -24px rgba(0, 0, 0, 0.55);
  --shadow-glow-blue: 0 0 0 1px rgba(var(--blue-rgb), 0.30),
                      0 12px 40px -12px rgba(var(--blue-rgb), 0.45);
  --shadow-glow-violet: 0 0 0 1px rgba(var(--violet-rgb), 0.30),
                        0 12px 40px -12px rgba(var(--violet-rgb), 0.45);
  --shadow-glow-cyan: 0 0 0 4px rgba(var(--cyan-rgb), 0.16);

  /* Glass / blur */
  --blur-glass: 18px;
  --glass-bg: rgba(16, 18, 20, 0.62);
  --glass-border: rgba(var(--ow-rgb), 0.10);

  /* Motion — slow and smooth */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 160ms; /* @kind other */
  --dur-base: 280ms; /* @kind other */
  --dur-slow: 520ms; /* @kind other */
  --dur-reveal: 760ms; /* @kind other */

  /* Grain / noise overlay opacity */
  --grain-opacity: 0.04; /* @kind other */
}

/* Future Corp — Base element defaults + brand utilities.
 * Opt-in: applies sane defaults on dark base. Specimen cards and kits can
 * use these helpers directly.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  line-height: var(--leading-snug);
  margin: 0;
  color: var(--text-primary);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

::selection { background: rgba(var(--blue-rgb), 0.30); color: var(--ow-100); }

/* ---- Eyebrow / mono label ---- */
.fc-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Data caption (mono) ---- */
.fc-caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caption);
  color: var(--text-secondary);
}

/* ---- Container ---- */
.fc-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Film grain / noise overlay for dark surfaces ----
 * Apply .fc-grain to a positioned element; it lays a faint static noise
 * over the surface to kill the flat templated look.
 */
.fc-grain { position: relative; }
.fc-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---- Live pulse dot (signal cyan) ---- */
.fc-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--live);
  position: relative;
}
.fc-pulse::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: var(--live);
  opacity: 0.5;
  animation: fc-pulse-ring 2.4s var(--ease-out) infinite;
}
@keyframes fc-pulse-ring {
  0%   { transform: scale(0.6); opacity: 0.5; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---- Scroll reveal: staggered fade-up + blur-in ---- */
.fc-reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out),
              filter var(--dur-reveal) var(--ease-out);
}
.fc-reveal.is-in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .fc-reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .fc-pulse::before { animation: none; }
}