@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Palette ──────────────────────────────────────────────────────── */
  --c-dark:    #000000;   /* headings, body text, hero/nav/footer bg */
  --c-accent:  #12E28C;   /* brand green */
  --c-blue:    #000000;   /* info, URL params */
  --c-white:   #FFFFFF;   /* cards, pills, inputs */
  --c-light:   #F5F5F5;   /* text on dark backgrounds */
  --c-surface: #FFFFFF;   /* page bg, section bg, stack cards */
  --c-hover:   #FAFAFA;   /* table row hover */
  --c-border:  #E5E5E5;   /* borders, dividers */
  --c-dim:     #CCCCCC;   /* arrows, scrollbar thumb */
  --c-muted:   #999999;   /* muted labels, captions */
  --c-subtle:  #666666;   /* secondary labels */
  --c-text:    #4D4D4D;   /* body paragraphs */
  --c-deep:    #333333;   /* tech pill text */
  --c-phone:   #000000;   /* phone mockup bg */

  /* ── Semantic aliases ─────────────────────────────────────────────── */
  --hero-bg:    #ffffff;
  --section-bg: var(--c-surface);
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ── Code (light mode) ────────────────────────────────────────────── */
  --code-bg:      rgba(15, 23, 42, .06);
  --code-text:    var(--c-dark);
  --code-comment: var(--c-muted);
  --code-kw:  #d73a49;
  --code-fn:  #6f42c1;
  --code-str: #032f62;
  --code-key: #005cc5;
  --code-em:  #e36209;

  /* ── HTTP method badges ───────────────────────────────────────────── */
  --method-post-bg:  rgba(45, 150, 100, .08);
  --method-post-fg:  #2c7a51;
  --method-get-bg:   rgba(60, 110, 180, .08);
  --method-get-fg:   #355f9c;
  --method-del-bg:   rgba(180, 70, 70, .08);
  --method-del-fg:   #a83c3c;
  --method-patch-bg: rgba(180, 120, 40, .08);
  --method-patch-fg: #9c6d23
}

html, body {
  font-family: var(--font-body);
  color: var(--c-dark);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--c-dark); margin: 0; letter-spacing: -0.3px; }
h1 { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; }
h2 { font-size: 24px; font-weight: 700; line-height: 1.25; }
h3 { font-size: 18px; font-weight: 700; line-height: 1.3; }
h4 { font-size: 15px; font-weight: 700; line-height: 1.4; }
p  { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--c-dark); margin: 0; }
code, kbd, pre { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }