/**
 * Base Styles & Design System for NewtonVotes
 * 
 * Defines CSS custom properties for colors, typography, spacing, and other
 * design tokens used throughout the application.
 */

:root {
  /* Colors - Primary */
  --color-primary: #488f31;
  --color-primary-dark: #3a7227;
  
  /* Colors - Options (for visualizing results) */
  --color-option-1-base: #6f4e9f;  /* Purple - typically for Yes/Option 1 */
  --color-option-1-light: #9075b3;
  --color-option-1-lighter: #b09cc8;
  --color-option-1-lightest: #d1c6dc;
  --color-option-1-transparent: rgba(111, 78, 159, 0.1);
  
  /* Intensity-based color scales (for maps/visualizations) */
  --color-option-1-70: #6f4e9f;  /* 70%+ margin - strongest */
  --color-option-1-60: #9075b3;  /* 60-70% margin */
  --color-option-1-50: #b09cc8;  /* 50-60% margin */
  --color-option-1-40: #d1c6dc;  /* 40-50% margin - lightest */
  
  --color-option-2-base: #c1550b;  /* Orange - typically for No/Option 2 */
  --color-option-2-light: #d57c49;
  --color-option-2-lighter: #e4a27f;
  --color-option-2-lightest: #edc9b6;
  --color-option-2-transparent: rgba(193, 85, 11, 0.1);
  
  --color-option-2-70: #c1550b;  /* 70%+ margin - strongest */
  --color-option-2-60: #d57c49;  /* 60-70% margin */
  --color-option-2-50: #e4a27f;  /* 50-60% margin */
  --color-option-2-40: #edc9b6;  /* 40-50% margin - lightest */
  
  --color-option-3-base: #0a7ea4;  /* Blue - for Option 3 */
  --color-option-3-light: #4a9fb8;
  --color-option-3-lighter: #7ab8cb;
  --color-option-3-lightest: #aad0dd;
  --color-option-3-transparent: rgba(10, 126, 164, 0.1);
  
  --color-option-3-70: #0a7ea4;  /* 70%+ margin - strongest */
  --color-option-3-60: #4a9fb8;  /* 60-70% margin */
  --color-option-3-50: #7ab8cb;  /* 50-60% margin */
  --color-option-3-40: #aad0dd;  /* 40-50% margin - lightest */
  
  --color-option-4-base: #d4a843;  /* Gold - for Option 4 */
  --color-option-4-light: #ddb969;
  --color-option-4-lighter: #e5ca8f;
  --color-option-4-lightest: #eedbb5;
  --color-option-4-transparent: rgba(212, 168, 67, 0.1);
  
  --color-option-4-70: #d4a843;
  --color-option-4-60: #ddb969;
  --color-option-4-50: #e5ca8f;
  --color-option-4-40: #eedbb5;
  
  --color-option-5-base: #8b4789;  /* Magenta - for Option 5 */
  --color-option-5-light: #a66fa4;
  --color-option-5-lighter: #c097bf;
  --color-option-5-lightest: #dabfd9;
  --color-option-5-transparent: rgba(139, 71, 137, 0.1);
  
  --color-option-5-70: #8b4789;
  --color-option-5-60: #a66fa4;
  --color-option-5-50: #c097bf;
  --color-option-5-40: #dabfd9;
  
  --color-option-6-base: #2d7a4e;  /* Green - for Option 6 */
  --color-option-6-light: #5a9570;
  --color-option-6-lighter: #87b092;
  --color-option-6-lightest: #b4cab4;
  --color-option-6-transparent: rgba(45, 122, 78, 0.1);
  
  --color-option-6-70: #2d7a4e;
  --color-option-6-60: #5a9570;
  --color-option-6-50: #87b092;
  --color-option-6-40: #b4cab4;
  
  --color-option-7-base: #d32f2f;  /* Red - for Option 7 */
  --color-option-7-light: #e05757;
  --color-option-7-lighter: #ea8080;
  --color-option-7-lightest: #f4a8a8;
  --color-option-7-transparent: rgba(211, 47, 47, 0.1);
  
  --color-option-7-70: #d32f2f;
  --color-option-7-60: #e05757;
  --color-option-7-50: #ea8080;
  --color-option-7-40: #f4a8a8;
  
  /* Colors - Text */
  --color-text-primary: #1e1e1e;
  --color-text-secondary: #757575;
  --color-text-tertiary: #999999;
  --color-text-light: #666666;
  --color-text-muted: #cccccc;
  
  /* Colors - Backgrounds */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f5;
  --color-bg-tertiary: #f4f4f4;
  
  /* Colors - Borders */
  --color-border-default: #d9d9d9;
  --color-border-light: #e5e5e5;
  
  /* Typography - Font Families */
  --font-primary: 'Gotham Narrow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-condensed: 'Gotham Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  
  /* Typography - Sizes */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 28px;
  --font-size-3xl: 36px;
  --font-size-4xl: 42px;
  
  /* Typography - Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 500;
  
  /* Spacing */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 15px;
  --spacing-lg: 20px;
  --spacing-xl: 40px;
  
  /* Layout */
  --content-width-max: 1280px;
  --sidebar-width: 536px;
  
  /* Border Radius */
  --radius-sm: 5px;
  --radius-md: 10px;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

p {
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover {
  opacity: 0.8;
}

/* Layout Utilities */
.container {
  max-width: var(--content-width-max);
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
}

.content-wrapper {
  padding: var(--spacing-xl) 0;
}

/* Utility Classes */
.text-primary {
  color: var(--color-text-primary);
}

.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}