/*
 * Material Design Theme for Friends of County Parks
 * Custom lightweight Material Design implementation
 * Using CSS Variables for easy customization
 */

:root {
  /* Material Primary Colors */
  --md-primary: #1976D2;
  --md-primary-light: #42A5F5;
  --md-primary-dark: #1565C0;

  /* Material Secondary/Accent */
  --md-secondary: #5EC79E;
  --md-secondary-dark: #4AAF87;

  /* Material Neutral Palette */
  --md-surface: #FFFFFF;
  --md-background: #F5F5F5;
  --md-text-primary: #333333;
  --md-text-secondary: #666666;

  /* Material Elevation Shadows */
  --md-shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --md-shadow-2: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
  --md-shadow-3: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.10);
  --md-shadow-4: 0 15px 25px rgba(0,0,0,0.15), 0 5px 10px rgba(0,0,0,0.05);

  /* Material Typography */
  --md-font-body: 'Ubuntu', Arial, Helvetica, sans-serif;
  --md-font-heading: 'Droid Serif', Georgia, serif;
  --md-font-size-body: 1rem;
  --md-font-size-h1: 2.5rem;
  --md-font-size-h2: 2rem;
  --md-font-size-h3: 1.5rem;

  /* Material Transitions */
  --md-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --md-transition-standard: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --md-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Material Border Radius */
  --md-radius-small: 4px;
  --md-radius-medium: 8px;
  --md-radius-large: 12px;
}

/* Material Button Styles */
.md-button,
a.buttonlink {
  background: var(--md-primary);
  color: white;
  padding: 10px 20px;
  border-radius: var(--md-radius-small);
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--md-shadow-1);
  transition: all var(--md-transition-standard);
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
}

.md-button:hover,
a.buttonlink:hover {
  background: var(--md-secondary);
  box-shadow: var(--md-shadow-2);
  transform: translateY(-1px);
  color: white;
}

.md-button:active,
a.buttonlink:active {
  box-shadow: var(--md-shadow-1);
  transform: translateY(0);
}

/* Material Card */
.md-card {
  background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
  border-radius: var(--md-radius-medium);
  box-shadow: var(--md-shadow-1);
  padding: 16px;
  transition: all var(--md-transition-standard);
  border: 1px solid rgba(0,0,0,0.05);
}

.md-card:hover {
  box-shadow: var(--md-shadow-2);
  transform: translateY(-2px);
  border-color: rgba(0,0,0,0.08);
}

/* Material Elevation Classes */
.elevation-0 { box-shadow: none; }
.elevation-1 { box-shadow: var(--md-shadow-1); }
.elevation-2 { box-shadow: var(--md-shadow-2); }
.elevation-3 { box-shadow: var(--md-shadow-3); }
.elevation-4 { box-shadow: var(--md-shadow-4); }