/* CareClinic Color System - Matches React Native App */
:root {
  /* Primary Brand Colors */
  --cc-app-color: #3B81D3;
  --cc-primary: #3B81D3;
  --cc-toggle-on: #3B81D3;
  
  /* Background Colors */
  --cc-background: #f7f9fc;
  --cc-header-background: #EFF4FA;
  --cc-header-view: #EEEEEE;
  --cc-card-inner: #ffffff;
  
  /* Text Colors */
  --cc-header-font: #6F7477;
  --cc-label-color: gray;
  --cc-value-color: #000000;
  --cc-placeholder: #C7C7CD;
  --cc-drug-info-warning: #7f92ac;
  
  /* Border & Icon Colors */
  --cc-border: #c3c3c3;
  --cc-icon: #b2bec3;
  --cc-icon-dark: #46556b;
  
  /* Layout Constants */
  --cc-card-margin: 10px;
  --cc-card-margin-vertical: 15px;
  --cc-border-radius-field: 10px;
  --cc-border-radius-button: 15px;
  
  /* Semantic Colors for Health Tracking */
  --cc-success: #28a745;
  --cc-warning: #ffc107;
  --cc-danger: #dc3545;
  --cc-info: #17a2b8;
  
  /* Mood Colors (for 5-point scale) */
  --cc-mood-1: #e74c3c; /* Very bad */
  --cc-mood-2: #f39c12; /* Bad */
  --cc-mood-3: #f1c40f; /* Neutral */
  --cc-mood-4: #2ecc71; /* Good */
  --cc-mood-5: #27ae60; /* Very good */
  
  /* Additional Tracker Colors */
  --cc-medication: #3B81D3;
  --cc-symptoms: #e74c3c;
  --cc-nutrition: #f39c12;
  --cc-activity: #2ecc71;
  --cc-measurements: #9b59b6;
  --cc-diary: #34495e;
  --cc-therapies: #1abc9c;
}

/* Dark mode support (future-proofing) */
@media (prefers-color-scheme: dark) {
  :root {
    --cc-background: #1a1a1a;
    --cc-header-background: #2d2d2d;
    --cc-card-inner: #2d2d2d;
    --cc-header-font: #ffffff;
    --cc-label-color: #cccccc;
    --cc-value-color: #ffffff;
    --cc-border: #444444;
    --cc-icon: #888888;
  }
}

/* Utility classes using the color system */
.cc-bg-primary { background-color: var(--cc-app-color); }
.cc-text-primary { color: var(--cc-app-color); }
.cc-bg-background { background-color: var(--cc-background); }
.cc-bg-header { background-color: var(--cc-header-background); }
.cc-text-header { color: var(--cc-header-font); }
.cc-text-label { color: var(--cc-label-color); }
.cc-text-value { color: var(--cc-value-color); }
.cc-border { border-color: var(--cc-border); }

/* Quick check-in card styling */
.cc-checkin-card {
  background: var(--cc-card-inner);
  border: 1px solid var(--cc-border);
  border-radius: var(--cc-border-radius-field);
  margin: var(--cc-card-margin);
  padding: var(--cc-card-margin-vertical) var(--cc-card-margin);
}

/* Button styling matching React Native */
.cc-button-primary {
  background-color: var(--cc-app-color);
  border-radius: var(--cc-border-radius-button);
  border: none;
  color: white;
  padding: 12px 24px;
  font-weight: 600;
}

.cc-button-primary:hover {
  background-color: #2a6bc0;
  color: white;
}

/* Icon styling */
.cc-icon {
  color: var(--cc-icon);
  width: 24px;
  height: 24px;
}

.cc-icon-dark {
  color: var(--cc-icon-dark);
}