/* ============================================
   CIRCUITX — DESIGN VARIABLES (our "paint swatches")
   These are CSS Custom Properties. Every value here
   can be reused anywhere in style.css using var(--name)
   ============================================ */

:root {
  /* :root means "apply these to the whole document" */

  /* ---- BRAND COLOR ---- */
  --color-accent: #14b8a6;       /* our main teal/turquoise */
  --color-accent-glow: #2dd4bf;  /* a lighter teal, used for hover glow effects */

  /* ---- FONTS ---- */
  --font-heading: 'Orbitron', sans-serif;  /* futuristic font for headings */
  --font-body: 'Inter', sans-serif;         /* easier-to-read font for paragraphs */

  /* ---- SPACING (reused gaps/padding so spacing stays consistent) ---- */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;
  --spacing-xl: 64px;
}

/* ---- DARK THEME (default) ---- */
[data-theme="dark"] {
  --color-bg: #0a0e14;           /* near-black background */
  --color-bg-alt: #131822;       /* slightly lighter — for cards/sections */
  --color-text: #e6f1ef;         /* off-white text, easy on the eyes */
  --color-text-muted: #8a99a8;   /* dimmer text for less important info */
}

/* ---- LIGHT THEME ---- */
[data-theme="light"] {
  --color-bg: #f5f7fa;
  --color-bg-alt: #ffffff;
  --color-text: #0a0e14;
  --color-text-muted: #5a6a7a;
}