/*
 * 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.
 */
/* You can use the following syntax to include files in this manifest:
 *= require_tree .
 *= require_self
 */
/* Base Reset & Layout */
/** {*/
  /*margin: 0;*/
  /*padding: 0;*/
  /*box-sizing: border-box;*/
/*}*/

body {
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.5;
  background-color: var(--bg);
  color: var(--text);
  /*padding: 1rem;*/
}

/* Color Themes */
:root {
  --bg: #fdfcf8;
  --text: #1e1e1e;
  --button-bg-1: #e0c097; /* sand */
  --button-bg-2: #d4a373; /* wheat */
  --button-bg-3: #a3b18a; /* grass */
  --button-bg-4: #8ecae6; /* sky */
  --button-bg-5: #90be6d; /* spring green */
  --button-bg-6: #cdb4db; /* lavender */
  --button-text: #1e1e1e;
  --card-bg: #ffffff;
  --section-bg: #f4f1ee;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #f0f0f0;
    --button-bg-1: #665c54;
    --button-bg-2: #7c6f64;
    --button-bg-3: #5f7c6f;
    --button-bg-4: #4e6e81;
    --button-bg-5: #586e4d;
    --button-bg-6: #6c5d6e;
    --button-text: #ffffff;
    --card-bg: #1e1e1e;
    --section-bg: #1a1a1a;
  }
}

/* Footer */
footer {
  margin-top: 2rem;
  padding: 1rem;
  text-align: center;
  background-color: var(--section-bg);
  border-radius: 10px;
}