@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
  /* Primary Colors */
  --larkan-green: #2B5B3E;
  --larkan-gold: #FFD700;
  --larkan-white: #FFFFFF;
  --larkan-green-light: #346d4a;
  
  /* Surface Colors */
  --surface-primary: var(--larkan-green);
  --surface-secondary: var(--larkan-white);
  --surface-accent: var(--larkan-gold);
  
  /* Text Colors */
  --text-on-primary: var(--larkan-white);
  --text-on-secondary: var(--larkan-green);
  --text-on-accent: var(--larkan-green);
  
  /* Elevation */
  --md-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --md-elevation-2: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
  
  /* Typography */
  --md-sys-typescale-headline-large: 32px;
  --md-sys-typescale-headline-medium: 28px;
  --md-sys-typescale-body-large: 16px;
  --md-sys-typescale-body-medium: 14px;
  
  --primary-color: #2B5B3E;
  --surface-color: #ffffff;
  --on-surface: #000000;
  --spacing-unit: 8px;
  --secondary-color: #346d4a;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --background-light: #f8f9fa;
  --background-dark: #e9ecef;
}

.elevation-1 {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease;
}

.elevation-1:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}