/* ============================================================
   ROCKEYE Knowledge Base – CSS Variables (Design Tokens)
   ============================================================ */

:root {
  /* ---------- Brand Colors ---------- */
  --color-primary: #E63946;
  /* ROCKEYE red */
  --color-primary-hover: #c62030;
  --color-dark: #111111;
  /* hero / navbar bg */
  --color-dark-alt: #1a1a1a;
  --color-dark-card: #1e1e1e;
  --color-white: #ffffff;
  --color-light: #f8f9fa;
  --color-light-alt: #f0f0f0;
  --color-muted: #6c757d;
  --color-text: #222222;
  --color-text-light: #555555;
  --color-border: #e0e0e0;
  --color-black: #000000;

  /* ---------- Module Card ---------- */
  --card-bg: #1e1e1e;
  --card-border: #2e2e2e;
  --card-hover-border: #E63946;
  --card-radius: 10px;

  /* ---------- Typography ---------- */
  --font-primary: 'Public Sans', 'Segoe UI', sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.85rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Spacing ---------- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* ---------- Shadows ---------- */
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 8px 30px rgba(230, 57, 70, 0.15);

  /* ---------- Transitions ---------- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}