/**
 * variables.css
 * ─────────────────────────────────────────────────────────────────
 * Single source of truth for all design tokens.
 *
 * RULES:
 *   - Never hardcode colors, spacing, or font sizes in other files.
 *   - Always reference a variable defined here.
 *   - To update the theme, change only this file.
 */

:root {
  /* ── Color palette ───────────────────────────────── */

  /* Backgrounds */
  --bg:          #F5F0E8;   /* Warm cream — main page background  */
  --surface:     #FDFAF4;   /* Sidebar / elevated panels          */
  --surface2:    #EDE5D3;   /* Card fills, table headers          */
  --surface3:    #E2D7C3;   /* Subtle highlights, scrollbar thumb */

  /* Borders */
  --border:      rgba(139, 105,  20, 0.22);  /* Standard border       */
  --border-soft: rgba( 44,  36,  22, 0.09);  /* Subtle dividers       */

  /* Accent palette */
  --accent:      #8B6914;   /* Golden  — primary CTA, active nav  */
  --accent2:     #4A7080;   /* Dusty teal — secondary / circuit   */
  --accent3:     #5E7A5A;   /* Sage green — success / element     */
  --accent4:     #8B4A14;   /* Terracotta — warning / emphasis    */

  /* Text hierarchy */
  --text:        #2C2416;   /* Primary — warm dark brown          */
  --text-muted:  #5A4A30;   /* Secondary — medium brown           */
  --text-dim:    #9A8870;   /* Tertiary / disabled / metadata     */

  /* Code blocks (intentionally dark for readability contrast) */
  --code-bg:     #1C1610;

  /* ── Layout ──────────────────────────────────────── */
  --sidebar-w:   280px;     /* Sidebar width (also in responsive) */
}