/* Design System Tokens */
:root {
  /* Brand */
  --figslot-purple: #7C6FF9;
  --figslot-purple-600: #6A5CEB;
  --figslot-purple-100: #EEEAFD;
  --figslot-purple-lighter: rgba(124, 111, 249, 0.04);

  /* Neutrals (WCAG AA on light bg) */
  --bg: #F7F8FA;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #FAFBFC;
  --panel: #FFFFFF;
  --panel-border: #E7E9EE;
  --border-color: #E7E9EE;
  --border-light: rgba(0, 0, 0, 0.05);
  --text-strong: #111827;   /* ~#111 */
  --text-primary: #111827;
  --text: #374151;          /* slate-700 */
  --text-secondary: #4A4A4A;
  --text-muted: #6B7280;    /* slate-500 */
  --text-tertiary: #9CA3AF;
  --divider: #E5E7EB;

  /* Feedback */
  --success: #22C55E;
  --warning: #F59E0B;
  --info: #0EA5E9;
  --danger: #EF4444;
  --accent-red: #EF4444;
  --accent-blue: #0EA5E9;

  /* Shadows */
  --shadow: 0 6px 16px rgba(17, 24, 39, 0.06);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 32px rgba(124, 111, 249, 0.2);
  
  /* Border Radius */
  --radius: 12px;
  --radius-md: 12px;
  --radius-lg: 16px;
  
  /* Typography Sizes */
  --font-size-3xl: 32px;
}