/* Custom Graphite Darkish Blue Theme for Day & Night Inc. */

:root {
  --primary: #2C3E50;        /* Premium graphite darkish blue */
  --secondary: #34495E;      /* Slightly lighter blue-gray */
  --surface: #2C3E50;        /* Same as primary for consistency */
  --onSurface: #ECF0F1;      /* Light gray for contrast */
  --interactive: #3498DB;    /* Bright blue for interactive elements */
  --critical: #E74C3C;       /* Red for errors (kept for contrast) */
  --warning: #F39C12;        /* Gold for warnings */
  --highlight: #1ABC9C;      /* Turquoise for highlights */
  --success: #27AE60;        /* Rich green for success */
  --decorative: #9B59B6;     /* Purple for decorative elements */
  --border: #BDC3C7;         /* Light gray for borders */
  --background: #F5F7FA;     /* Light background */
  --icon: #7F8C8D;          /* Gray for icons */
  --textSubdued: #95A5A6;   /* Lighter gray for secondary text */
  --divider: #BDC3C7;        /* Gray for dividers */
  --text: #2C3E50;          /* Dark blue-gray for primary text */
  --formFieldBorder: #C9CCCF; /* Medium gray for form fields */
  --formFieldBorderShadow: #AEB4B9; /* Slightly darker gray for shadows */
}

/* Additional theme enhancements */
.button.primary {
  background-color: var(--primary);
}

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

.header {
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
}

.footer {
  background-color: var(--primary);
  color: var(--onSurface);
}

body {
  color: var(--text);
}

/* Card and layout enhancements */
.card {
  background-color: #ffffff;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.card.subdued {
  background-color: #FAFBFC;
}

/* Specific element color overrides to ensure the new theme takes precedence */
.bg-primary {
  background-color: var(--primary) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.border-primary {
  border-color: var(--primary) !important;
}

.hover\:text-primary:hover {
  color: var(--primary) !important;
}

.hover\:bg-primary:hover {
  background-color: var(--primary) !important;
}