/* Odyssey Mobile Global CSS */
:root {
  --primary-color: #4F46E5;
  --primary-color-light: #6366F1;
  --secondary-color: #0F172A;
  --background-color: #F8FAFC;
  --text-color: #1E293B;
  --text-muted: #64748B;
  --border-color: #E2E8F0;
  --danger-color: #EF4444;
  --white: #FFFFFF;
  --header-height: 60px;
  --drawer-width: 280px;
}

/* Dark mode variables */
.dark-mode {
  --primary-color: #818CF8;
  --primary-color-light: #6366F1;
  --secondary-color: #F8FAFC;
  --background-color: #1E293B;
  --text-color: #F8FAFC;
  --text-muted: #CBD5E1;
  --border-color: #334155;
  --danger-color: #F87171;
  --white: #0F172A;
}

/* Global styles */
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

/* For mobile devices */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

/* Make the app mobile-friendly */
#odyssey-mobile-app {
  max-width: 100vw;
  overflow-x: hidden;
}

/* iOS-specific styles */
@supports (-webkit-touch-callout: none) {
  .header {
    padding-top: env(safe-area-inset-top);
    height: calc(var(--header-height) + env(safe-area-inset-top));
  }
  
  .content {
    padding-bottom: env(safe-area-inset-bottom);
  }
}