:root {
  /* Primary Colors */
  --primary-main: #344955;
  --primary-light: #5D7384;
  --primary-dark: #0D2C3A;

  /* Secondary Colors */
  --secondary-main: #78A083;
  --secondary-light: #A8D1B3;
  --secondary-dark: #4B7256;

  /* Accent Colors */
  --accent-1: #35374B;
  --accent-2: #50727B;

  /* Background and Surface Colors */
  --background: #FFFFFF;
  --surface: #F5F5F5;

  /* Text Colors - Light text for dark background */
  --text-primary: #FFFFFF;
  --text-secondary: #E0E0E0;
  
  /* Prevent browser extensions from overriding color scheme */
  color-scheme: dark;
}

body {
  background-color: var(--primary-main);
  color: var(--text-primary);
  font-family: 'Roboto', sans-serif; /* Material Design recommended font */
  
  /* Force light text on dark background */
  color-scheme: dark;
}

/* Example usage for common elements */

/* App Bar */
.app-bar {
  background-color: var(--primary-main);
  color: var(--background);
}

/* Buttons */
.button-primary {
  background-color: var(--primary-main);
  color: var(--background);
}

.button-secondary {
  background-color: var(--secondary-main);
  color: var(--text-primary);
}

/* Floating Action Button */
.fab {
  background-color: var(--secondary-main);
  color: var(--text-primary);
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  position: fixed;
  z-index: 1000;
}

.fab:hover {
  background-color: var(--secondary-light);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transform: scale(1.1);
}

.fab:active {
  transform: scale(0.95);
}

.install-fab {
  bottom: 80px;
  right: 20px;
}

/* Cards */
.card {
  background-color: var(--primary-dark);
  color: var(--text-primary);
  padding: 20px 16px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  max-width: 90%;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
}

/* Accent elements */
.accent-1 {
  color: var(--accent-1);
}

.accent-2 {
  color: var(--accent-2);
}

/* Text styles */
.text-secondary {
  color: var(--text-secondary) !important;
  font-size: 1.1em;
}

.text-primary {
  color: var(--text-primary) !important;
  font-size: 1.2em;
}

.text-title {
  font-size: 2em;
  color: var(--text-primary) !important;
}

/* Common button styles */
.button {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1px;
  padding: 10px 24px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Elevated button */
.button-elevated {
  background-color: var(--surface);
  color: var(--primary-main);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.button-elevated:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
}

/* Filled button */
.button-filled {
  background-color: var(--primary-main);
  color: var(--background);
}

.button-filled:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

/* Tonal button */
.button-tonal {
  background-color: var(--secondary-light);
  color: var(--primary-dark);
}

.button-tonal:hover {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

/* Outlined button */
.button-outlined {
  background-color: transparent;
  color: var(--primary-main);
  border: 1px solid var(--primary-main);
}

.button-outlined:hover {
  background-color: rgba(var(--primary-main-rgb), 0.08);
}

/* Font Size Options */
body.font-extra-small .text-secondary {
  font-size: 0.8em !important;
}

body.font-extra-small .text-primary {
  font-size: 0.9em !important;
}

body.font-extra-small .text-title {
  font-size: 1.4em !important;
}

body.font-small .text-secondary {
  font-size: 0.9em !important;
}

body.font-small .text-primary {
  font-size: 1.0em !important;
}

body.font-small .text-title {
  font-size: 1.6em !important;
}

body.font-medium .text-secondary,
body:not([class*="font-"]) .text-secondary {
  font-size: 1.1em !important;
}

body.font-medium .text-primary,
body:not([class*="font-"]) .text-primary {
  font-size: 1.2em !important;
}

body.font-medium .text-title,
body:not([class*="font-"]) .text-title {
  font-size: 2em !important;
}

body.font-large .text-secondary {
  font-size: 1.3em !important;
}

body.font-large .text-primary {
  font-size: 1.4em !important;
}

body.font-large .text-title {
  font-size: 2.4em !important;
}

body.font-extra-large .text-secondary {
  font-size: 1.5em !important;
}

body.font-extra-large .text-primary {
  font-size: 1.6em !important;
}

body.font-extra-large .text-title {
  font-size: 2.8em !important;
}