/* TriviPals Design System Tokens */
:root {
  /* Brand Colors */
  --brand-1: #6C5CE7;
  --brand-2: #00C2FF;
  --brand-3: #00D28F;
  
  /* Text Colors */
  --text-1: #0F172A;
  --text-2: #475569;
  
  /* Background Colors */
  --bg-1: #FFFFFF;
  --bg-2: #F8FAFC;
  
  /* Border Colors */
  --border-1: #E2E8F0;
  
  /* Semantic Colors */
  --warning: #F59E0B;
  --danger: #EF4444;
  --success: var(--brand-3);
  
  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, "Noto Sans", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  
  /* Border Radius */
  --radius: 12px;
  
  /* Shadows */
  --shadow-1: 0 6px 20px rgba(2, 6, 23, 0.06);
  --shadow-2: 0 10px 25px rgba(2, 6, 23, 0.1);
}

/* Base Typography Scale */
html {
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  color: var(--text-1);
  background: var(--bg-2);
  line-height: 1.6;
}

h1, .display-1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2, .display-2 { font-size: clamp(2rem, 4vw, 3rem); }
h3, .display-3 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
h4, .display-4 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h5, .display-5 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
h6, .display-6 { font-size: clamp(1.125rem, 1.5vw, 1.5rem); }

.lead {
  font-size: clamp(1.125rem, 2vw, 1.25rem);
  font-weight: 400;
  color: var(--text-2);
}