/* ============================================
   VARIABLES — Edit these to restyle the site
   ============================================ */

:root {
  /* ---- Colors ---- */
  --color-primary:       #00c8e8;   /* cyan — main accent */
  --color-primary-light: #22d3ee;
  --color-primary-dark:  #0891b2;

  --color-secondary:       #818cf8;   /* indigo */
  --color-secondary-light: #a5b4fc;
  --color-secondary-dark:  #6366f1;

  --color-accent:        #a78bfa;   /* purple */

  --color-bg:            #060c16;   /* near-black page background */
  --color-bg-alt:        #0a1525;   /* slightly lighter */
  --color-surface:       #0e1e36;   /* card / panel surface */

  --color-text:          #cdd9e5;   /* main body text */
  --color-text-muted:    #6b8299;   /* secondary / caption */
  --color-text-inverse:  #060c16;   /* text on accent backgrounds */

  --color-border:        rgba(0, 200, 232, 0.15);
  --color-shadow:        rgba(0, 0, 0, 0.6);

  --color-success:       #34d399;
  --color-warning:       #fbbf24;
  --color-error:         #f87171;

  /* ---- Typography ---- */
  --font-heading: 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Fira Code', 'Courier New', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;

  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

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

  /* ---- Layout ---- */
  --max-width:       1200px;
  --sidebar-width:   260px;
  --nav-height:      64px;

  /* ---- Borders & Radius ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full:9999px;

  --border-width: 1px;

  /* ---- Shadows (with subtle cyan glow) ---- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.6);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,200,232,0.06);
  --shadow-lg:  0 10px 25px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,200,232,0.12);

  /* ---- Transitions ---- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}