/* variables.css */
:root {
  --bg:           #0f1117;
  --bg-card:      #181c27;
  --bg-subtle:    #1e2335;
  --bg-elevated:  #232840;

  --text:         #eef0f8;
  --text-muted:   #7b82a8;
  --text-light:   #4e5470;

  --primary:      #4f8ef7;
  --primary-dark: #3a78e8;
  --primary-light: rgba(79,142,247,.12);

  --accent:       #a855f7;
  --accent-light: rgba(168,85,247,.12);

  --teal:         #2dd4bf;
  --teal-light:   rgba(45,212,191,.10);

  --gold:         #fbbf24;
  --gold-light:   rgba(251,191,36,.10);

  --success:      #34d399;
  --danger:       #f87171;

  --border:       rgba(255,255,255,.07);
  --border-focus: #4f8ef7;

  --font-display: 'Nunito', sans-serif;
  --font-body:    'Nunito Sans', sans-serif;

  --shadow-sm:  0 1px 4px rgba(0,0,0,.3);
  --shadow-md:  0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:  0 12px 48px rgba(0,0,0,.5);
  --shadow-glow:0 0 32px rgba(79,142,247,.25);

  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  22px;
  --radius-xl:  32px;

  --max-w:      980px;
  --transition: .2s ease;
}