/* ============================================================
   AvalAI Docs — Unified Design Tokens (A1)
   ------------------------------------------------------------
   Single semantic palette consumed by all stylesheets and the
   v1/v2 components. Loaded FIRST (before theme/component CSS) so
   every `var(--token, #fallback)` resolves to these values.

   Conventions:
   - Light values live in :root.
   - Dark values are overridden under [data-theme="dark"].
   - These mirror the existing literals used across the project
     (#0969da/#58a6ff accent, #0d1117/#161b22 surfaces, #30363d
     borders, #8b949e/#c9d1d9 text) so adopting them is a
     no-visual-change refactor.
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --surface-1: #ffffff;          /* page background */
  --surface-2: #f9fafb;          /* card / panel */
  --surface-3: #f6f8fa;          /* raised header / subtle fill */
  --surface-inset: #f6f8fa;      /* code blocks / inputs */
  --surface-hover: rgba(9, 105, 218, 0.06);

  /* ---- Borders ---- */
  --border-subtle: #e1e4e8;
  --border-strong: #d0d7de;
  --border-focus: #0969da;

  /* ---- Text ---- */
  --text-1: #1f2328;             /* primary */
  --text-2: #57606a;             /* muted / secondary */
  --text-3: #8b949e;             /* faint / meta */
  --text-invert: #ffffff;

  /* ---- Brand / accent ---- */
  --accent: #0969da;
  --accent-hover: #0a5fc2;
  --accent-soft: rgba(9, 105, 218, 0.10);
  --accent-border: rgba(9, 105, 218, 0.25);
  --accent-contrast: #ffffff;

  /* ---- Semantic status ---- */
  --info: #3b82f6;
  --info-soft: #eff6ff;
  --info-border: #bfdbfe;
  --info-text: #1e40af;

  --success: #10b981;
  --success-soft: #ecfdf5;
  --success-border: #a7f3d0;
  --success-text: #065f46;

  --warn: #f59e0b;
  --warn-soft: #fffbeb;
  --warn-border: #fde68a;
  --warn-text: #92400e;

  --danger: #ef4444;
  --danger-soft: #fef2f2;
  --danger-border: #fecaca;
  --danger-text: #991b1b;

  --tip: #8b5cf6;
  --tip-soft: #f5f3ff;
  --tip-border: #ddd6fe;
  --tip-text: #5b21b6;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 14px rgba(9, 105, 218, 0.10);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);

  /* ---- Motion ---- */
  --transition-fast: 0.15s ease;
  --transition-med: 0.25s ease;

  /* ---- Reading aids ---- */
  --reading-progress-height: 3px;
}

[data-theme="dark"] {
  /* ---- Surfaces ---- */
  --surface-1: #0d1117;
  --surface-2: #161b22;
  --surface-3: #1a2029;
  --surface-inset: #0d1117;
  --surface-hover: rgba(88, 166, 255, 0.08);

  /* ---- Borders ---- */
  --border-subtle: #30363d;
  --border-strong: #30363d;
  --border-focus: #58a6ff;

  /* ---- Text ---- */
  --text-1: #e6edf3;
  --text-2: #c9d1d9;
  --text-3: #8b949e;
  --text-invert: #0d1117;

  /* ---- Brand / accent ---- */
  --accent: #58a6ff;
  --accent-hover: #79c0ff;
  --accent-soft: rgba(88, 166, 255, 0.12);
  --accent-border: rgba(88, 166, 255, 0.30);
  --accent-contrast: #0d1117;

  /* ---- Semantic status (solid, GitHub-dark inspired) ---- */
  --info: #60a5fa;
  --info-soft: #1e3a5f;
  --info-border: #3b82f6;
  --info-text: #bfdbfe;

  --success: #34d399;
  --success-soft: #064e3b;
  --success-border: #059669;
  --success-text: #a7f3d0;

  --warn: #fbbf24;
  --warn-soft: #3a2e0a;
  --warn-border: #b7791f;
  --warn-text: #fde68a;

  --danger: #f87171;
  --danger-soft: #7f1d1d;
  --danger-border: #dc2626;
  --danger-text: #fecaca;

  --tip: #a78bfa;
  --tip-soft: #2e2250;
  --tip-border: #7c3aed;
  --tip-text: #ddd6fe;

  /* ---- Shadows (deeper on dark) ---- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}