/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --section-bg: #f7f7f7;
  --card-bg: #ffffff;
  --card-text: #333333;
}

.dark {
  --bg-color: #1a202c;
  --text-color: #ffffff;
  --section-bg: #2d3748;
  --card-bg: #4a5568;
  --card-text: #e2e8f0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

[data-theme-target="section"] {
  background-color: var(--section-bg);
  transition: background-color 0.3s ease-in-out;
}

[data-theme-target="card"] {
  background-color: var(--card-bg);
  color: var(--card-text);
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}