/**
 * MotionForge design tokens — final visual system.
 * Sparse color. One accent. Editorial type + spacing rhythm.
 */

:root {
  /* Surfaces — stepped, not muddy */
  --mf-canvas: #050505;
  --mf-surface: #0a0a0a;
  --mf-surface-alt: #101010;
  --mf-elevated: #171717;

  /* Text */
  --mf-ink: #f4f4f4;
  --mf-muted: #b3b3b3;
  --mf-faint: #9a9a9a;

  /* Lines — hairlines carry hierarchy */
  --mf-border: rgba(255, 255, 255, 0.1);
  --mf-border-strong: rgba(255, 255, 255, 0.18);
  --mf-border-soft: rgba(255, 255, 255, 0.055);

  /* Signal accent — CTA + live only */
  --mf-accent: #c8f542;
  --mf-accent-ink: #0a0a0a;
  --mf-accent-soft: rgba(200, 245, 66, 0.1);
  --mf-accent-line: rgba(200, 245, 66, 0.32);

  /* Typography */
  --mf-font: "Manrope", "Noto Sans SC", system-ui, sans-serif;
  --mf-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;

  --mf-text-xs: 0.75rem;
  --mf-text-sm: 0.875rem;
  --mf-text-md: 1.0625rem;
  --mf-text-lg: 1.1875rem;
  --mf-text-xl: clamp(1.35rem, 2.4vw, 1.75rem);
  --mf-text-2xl: clamp(1.9rem, 3.6vw, 2.65rem);
  --mf-text-3xl: clamp(2.35rem, 5.2vw, 3.65rem);
  --mf-text-display: clamp(2.95rem, 9.5vw, 6.5rem);

  --mf-leading-tight: 1.02;
  --mf-leading-snug: 1.18;
  --mf-leading-body: 1.68;
  --mf-tracking-tight: -0.048em;
  --mf-tracking-display: -0.055em;
  --mf-tracking-label: 0.1em;

  /* Space — intentional rhythm, not uniform blocks */
  --mf-space-1: 0.25rem;
  --mf-space-2: 0.5rem;
  --mf-space-3: 0.75rem;
  --mf-space-4: 1rem;
  --mf-space-5: 1.5rem;
  --mf-space-6: 2rem;
  --mf-space-7: 3rem;
  --mf-space-8: clamp(4.5rem, 11vw, 7.5rem);
  --mf-space-9: clamp(6rem, 14vw, 10rem);
  --mf-space-dense: clamp(3rem, 7vw, 4.5rem);
  --mf-space-airy: clamp(5.5rem, 13vw, 9.5rem);

  /* Layout */
  --mf-wrap: 1100px;
  --mf-wrap-narrow: 680px;
  --mf-wrap-wide: 1440px;
  --mf-gutter: clamp(1.35rem, 3.2vw, 2.25rem);
  --mf-header-h: 4rem;
  --mf-radius: 2px;
  --mf-grid-gap: clamp(1.15rem, 2.6vw, 1.85rem);

  /* Motion */
  --mf-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mf-duration: 220ms;
  --mf-duration-slow: 520ms;

  /* Effects — quieter grain */
  --mf-noise-opacity: 0.028;
  --mf-grid-line: rgba(255, 255, 255, 0.028);
  --mf-selection: rgba(200, 245, 66, 0.28);
}