/* ============================================================
   SCRAPELLM — THEME
   All fonts, colours, and design tokens live here.
   Edit this file to restyle the entire app.
   ============================================================

   FONTS
   -----
   The Google Fonts import is in base_app.html (line ~10):
     Outfit        — body / UI text      → --font-body
     IBM Plex Mono — code, keys, values  → --font-mono

   To swap fonts:
     1. Replace the Google Fonts <link> in base_app.html with your new font URLs
     2. Update --font-body and --font-mono below to match the new family names
   Both steps are required — the variable must name a font the browser has loaded.
   ============================================================ */

:root {

  /* ── Fonts ─────────────────────────────────────────────────
     --font-body  : used everywhere (headings, labels, body copy)
     --font-mono  : API keys, code blocks, elapsed times
  ──────────────────────────────────────────────────────────── */
  --font-body: 'Outfit', 'Helvetica Neue', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;


  /* ── Brand / Accent ────────────────────────────────────────
     --accent      : buttons, links, active states, highlights
     --accent-glow : drop-shadow tint for hover cards
     --accent-2    : secondary accent (check-marks, success icons)
  ──────────────────────────────────────────────────────────── */
  --accent:       #7c3aed;   /* purple — primary brand colour */
  --accent-hover: #6d28d9;   /* darkened purple for hover states */
  --accent-glow:  rgba(124, 58, 237, 0.18);
  --accent-2:     #059669;   /* emerald — success / check-mark */


  /* ── Backgrounds ───────────────────────────────────────────
     --bg      : page background
     --bg-2    : subtle inset / table header / pressed state
     --bg-3    : slightly darker for hover on bg-2 surfaces
     --bg-card : card / panel / modal surface
  ──────────────────────────────────────────────────────────── */
  --bg:      #f6f8fa;
  --bg-2:    #eef1f6;
  --bg-3:    #e8ecf2;
  --bg-card: #ffffff;


  /* ── Borders ───────────────────────────────────────────────
     --border        : default hairline (most cards, dividers)
     --border-bright : slightly more opaque (inputs, key badge)
  ──────────────────────────────────────────────────────────── */
  --border:        rgba(15, 23, 42, 0.08);
  --border-bright: rgba(15, 23, 42, 0.15);


  /* ── Text ──────────────────────────────────────────────────
     --text       : primary headings and body copy
     --text-dim   : slightly softer (secondary body, list items)
     --text-muted : tertiary (labels, timestamps, placeholders)
  ──────────────────────────────────────────────────────────── */
  --text:       #0b1120;
  --text-dim:   #1e293b;
  --text-muted: #374151;


  /* ── Semantic colours ──────────────────────────────────────
     Used for status badges, alerts, and indicator dots.
  ──────────────────────────────────────────────────────────── */
  --live-green: #16a34a;   /* "Live" badges, success dots */
  --soon-amber: #d97706;   /* "Coming soon" badges */
  --danger:     #dc2626;   /* Error states, destructive actions */


  /* ── Shape & Shadow ────────────────────────────────────────
     --radius    : default card border-radius
     --radius-sm : buttons, inputs, smaller chips
  ──────────────────────────────────────────────────────────── */
  --radius:    12px;
  --radius-sm:  8px;

  --shadow-sm:   0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06),
                 0 2px 8px rgba(15, 23, 42, 0.06),
                 0 0 0 1px rgba(15, 23, 42, 0.05);
  --shadow-glow: 0 4px 32px rgba(124, 58, 237, 0.10);

}