:root {
  /* Brand - warm educational palette */
  --color-bg:           #f0f4ff;
  --color-surface:      #ffffff;
  --color-primary:      #4f46e5;
  --color-primary-dark: #3730a3;
  --color-secondary:    #06b6d4;
  --color-accent:       #f59e0b;
  --color-success:      #10b981;
  --color-danger:       #ef4444;
  --color-text:         #1e1b4b;
  --color-muted:        #6b7280;

  /* Answer Button Colors */
  --answer-1:           #4f46e5;
  --answer-2:           #06b6d4;
  --answer-3:           #f59e0b;
  --answer-4:           #10b981;
  --answer-5:           #ec4899;

  /* Answer icons (shapes for accessibility) */
  --icon-1: '⬤';
  --icon-2: '▲';
  --icon-3: '◆';
  --icon-4: '■';
  --icon-5: '★';

  /* Typography */
  --font-main:          'Nunito', sans-serif;
  --fw-black:           900;
  --fw-bold:            700;
  --fw-semibold:        600;
  --fw-normal:          400;

  /* Radius */
  --radius-xl:          20px;
  --radius-lg:          14px;
  --radius-md:          10px;
  --radius-sm:          6px;

  /* Shadows */
  --shadow-card:        0 4px 24px rgba(79, 70, 229, 0.10);
  --shadow-btn:         0 4px 0px rgba(0,0,0,0.15);
  --shadow-answer:      0 6px 0px rgba(0,0,0,0.18);
}