/* ============================================
   Scraping API — Design Tokens
   Aesthetic: Craftsman dev tool
   Light enterprise + warm whites + indigo-blue
============================================ */

:root {
  /* ---------- Backgrounds ---------- */
  --bg-base:      #F9F9F7;   /* warm off-white — page background */
  --bg-subtle:    #F2F2EE;   /* alt rows, hover tints */
  --bg-elevated:  #FFFFFF;   /* cards, elevated surfaces */
  --bg-code:      #0A0E1A;   /* dark code blocks */
  --bg-navy:      #0A0E1A;   /* full-bleed dark sections */

  /* ---------- Text ---------- */
  --text-primary:    #0A0E1A;
  --text-secondary:  #4A5467;
  --text-tertiary:   #8892A6;
  --text-quaternary: #B4BBC6;
  --text-inverse:    #F9F9F7;
  --text-inverse-secondary: #9BA3B4;

  /* ---------- Borders ---------- */
  --border-base:    #E5E5E0;   /* warm gray, matches bg */
  --border-subtle:  #EDEDE8;
  --border-strong:  #D2D2CB;
  --border-inverse: #1F2330;

  /* ---------- Brand accent ---------- */
  --accent:         #2E4BFF;   /* distinctive indigo-blue */
  --accent-hover:   #1D3AE6;
  --accent-pressed: #0F28C7;
  --accent-soft:    #E5E9FF;
  --accent-softer:  #F0F3FF;

  /* ---------- Semantic ---------- */
  --success:  #10A66B;
  --warning:  #D97706;
  --error:    #DC2626;

  /* ---------- Syntax (dark code blocks) ---------- */
  --syntax-bg:      #0A0E1A;
  --syntax-border:  #1F2330;
  --syntax-text:    #E4E7EE;
  --syntax-comment: #6A7485;
  --syntax-key:     #7CB7FF;    /* JSON keys, method names */
  --syntax-string:  #86E8C2;    /* strings */
  --syntax-number:  #FFB86C;    /* numbers */
  --syntax-keyword: #C491FF;    /* keywords */
  --syntax-punct:   #9BA3B4;    /* brackets, commas */

  /* ---------- Typography ---------- */
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Spacing (8px grid) ---------- */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;

  /* ---------- Shadows (subtle, enterprise-credible) ---------- */
  --shadow-xs: 0 1px 2px 0 rgba(10, 14, 26, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(10, 14, 26, 0.06), 0 1px 2px -1px rgba(10, 14, 26, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(10, 14, 26, 0.06), 0 2px 4px -2px rgba(10, 14, 26, 0.04);
  --shadow-lg: 0 16px 40px -8px rgba(10, 14, 26, 0.08), 0 4px 12px -4px rgba(10, 14, 26, 0.06);
  --shadow-inset-code: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);

  /* ---------- Layout ---------- */
  --max-content: 1200px;
  --max-narrow:  920px;
  --max-hero:    1280px;

  /* ---------- Motion ---------- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  450ms;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}