/* ============================================================================
   VAULT — design tokens for the MCPPlatform site.
   Graphite surfaces, a single brass light source. Edit values here only.
   ============================================================================ */

:root {
  /* ── surfaces ───────────────────────────────────────────────────────── */
  --bg-0: #060708;          /* page background */
  --bg-1: #0B0D0F;          /* alternate band */
  --bg-2: #101317;          /* card / panel */
  --bg-3: #161A1F;          /* elevated / hover */
  --scrim: rgba(6, 7, 8, 0.82);

  /* ── hairlines ──────────────────────────────────────────────────────── */
  --line-1: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.13);
  --line-gold: rgba(232, 176, 92, 0.35);
  --line-gold-dim: rgba(232, 176, 92, 0.16);

  /* ── text ───────────────────────────────────────────────────────────── */
  --text-1: #EDEBE6;        /* headings + primary body */
  --text-2: #9B9890;        /* muted body */
  --text-3: #67655F;        /* faint labels */

  /* ── brass ramp ─────────────────────────────────────────────────────── */
  --gold-200: #F7E3B8;
  --gold-300: #F0CE8E;      /* smallest gold text allowed */
  --gold-400: #E8B05C;      /* borders, strokes, dots */
  --gold-500: #DD9636;      /* button gradient top */
  --gold-600: #B4731F;      /* button gradient bottom */
  --gold-ink: #1A1206;      /* text ON gold */

  /* ── semantic (build states + form errors only) ────────────────────── */
  --ok: #5BD08F;
  --ok-dim: rgba(91, 208, 143, 0.12);
  --err: #E5685C;
  --err-dim: rgba(229, 104, 92, 0.10);

  /* ── glows + shadows ────────────────────────────────────────────────── */
  --glow-gold-sm: 0 0 24px rgba(221, 150, 54, 0.16);
  --glow-gold-lg: 0 0 64px rgba(221, 150, 54, 0.22);
  --shadow-panel: 0 24px 64px rgba(0, 0, 0, 0.5);
  --inner-edge: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* ── radius ─────────────────────────────────────────────────────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* ── spacing (4px base) ─────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-section: clamp(88px, 11vw, 152px);

  /* ── layout ─────────────────────────────────────────────────────────── */
  --content-max: 1120px;
  --content-pad: clamp(20px, 4vw, 40px);

  /* ── type families ──────────────────────────────────────────────────── */
  --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  /* ── type scale ─────────────────────────────────────────────────────── */
  --fs-display-1: clamp(2.875rem, 6.5vw, 5.25rem);
  --fs-display-2: clamp(2.125rem, 4.2vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 3vw, 2.375rem);
  --fs-h3: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 0.9375rem;
  --fs-small: 0.8125rem;
  --fs-eyebrow: 0.6875rem;
  --fs-stat: clamp(2.75rem, 5.5vw, 4.5rem);

  /* ── motion ─────────────────────────────────────────────────────────── */
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 450ms;
  --dur-4: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --stagger: 70ms;
}