/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* ============================================= */
/* THEME.CSS - ONLY color, font, and background properties 
   NOW USING CSS VARIABLES (color1, color2, ... as requested)
   Edit the :root section below to instantly change the entire theme!
   Fallback/non-theme colors (grays, whites, blacks, #222, #ccc, #ddd, #555, #777, #333, #fafafa, rgba neutrals, #fff) are still kept in structure.css
   Load this AFTER structure.css
*/
/* ============================================= */

/* Theme Variables - numbered exactly as requested */
:root {
  /* Colors */
  --color1: #6c55b5;     /* Primary purple - headings, main text accents */
  --color2: #6a5acd;     /* Secondary purple - notices, dates, links, relation-type */
  --color3: #d4c2ff;     /* Light purple borders / accents */
  --color4: #f6f1ff;     /* Body background */
  --color5: #f5f0ff;     /* Notice bar, footer, page-notice-bar */
  --color6: #f3eaff;     /* Sidebar background */
  --color7: #faf7ff;     /* Section, gallery, moodboard, updates, cards, recent-event */
  --color8: #e8dcff;     /* Horizontal nav & TM button backgrounds */
  --color9: #cdb9ff;     /* Hover states, scrollbar thumb, TM borders, active-ish */
  --color10: #b29cff;    /* Active nav state */
  --color11: #c8b5ff;    /* Section scrollbar thumb */
  --color12: #f5e6ff;    /* Era info popup background */
  --color13: #c1a3e2;    /* Era info border */
  --color14: #e6ddff;    /* Footer link hover background */

  /* Fonts */
  --font1: 'Courier New', monospace;                    /* Body, buttons, mono elements */
  --font2: "Comic Sans MS", "Brush Script MT", cursive; /* Headings (h1/h2/h3) */
  --font3: "Brush Script MT", cursive;                  /* Script style for nav, section headings, etc. */
  
}

body {
  font-family: var(--font1);
  background-color: var(--color4);
}
    
h1, h2, h3 {
  font-family: var(--font2);
  color: var(--color1);
}

.top-header {
  background: url('img/header.jpg') center/cover no-repeat;
}
.top-header h1 {
  font-family: var(--font2);
}
   
.page-notice-bar{
  background: var(--color5);
  border-color: var(--color3);
}
#noticeType{
  color: var(--color2);
}
   
.sidebar {
  background-color: var(--color6);
}
   
.site-footer {
  background: var(--color5);
  border-top-color: var(--color3);
  
}
.footer-title {
  color: var(--color2);
}
.footer-links a {
  color: var(--color2);
}
.footer-links a:hover {
  background: var(--color14);
}
button {
  font-family: var(--font1);
  border-color: var(--color3);
}
.gallery-item img {
  background: var(--color7);
  border-color: var(--color3);
}
.moodboard-item img {
  background: var(--color7);
  border-color: var(--color3);
}
.page-updates-box {
  background: var(--color7);
  border-color: var(--color3);
}
.update-item {
  border-bottom-color: var(--color3);
}
.update-date {
  color: var(--color2);
}
/* Nav links */
.horizontal-nav a {
  background-color: var(--color8);
  color: var(--color1);
  font-family: var(--font3);
}
.horizontal-nav a:hover {
  background-color: var(--color9);
}
.horizontal-nav a.active {
  background-color: var(--color10);
  color: #fff;
}
.horizontal-nav-container::-webkit-scrollbar-track {
  background: var(--color7);
}
.horizontal-nav-container::-webkit-scrollbar-thumb {
  background-color: var(--color9);
}
   
.section {
  background-color: var(--color7);
  border-top-color: var(--color3);
}
/* Heading on top border */
.section-heading {
  background-color: var(--color7);
  font-family: var(--font3);
  color: var(--color1);
}
.section-content::-webkit-scrollbar-thumb {
  background-color: var(--color11);
}
.section-content::-webkit-scrollbar-track {
  background: var(--color4);
}
.recent-event-card {
  background-color: var(--color7);
  border-color: var(--color9);
  font-family: var(--font1);
}
.recent-event-card h3 {
  font-family: var(--font3);
  color: var(--color1);
}
.stats-box {
  background-color: var(--color7);
  border-color: var(--color9);
}
.time-machine-box{
  border-color: var(--color9);
  background:var(--color7);
}
/* top title */
.tm-header{
  border-bottom-color: var(--color9);
}
.era-info {
  background-color: var(--color12);
  border-color: var(--color13);
}
/* controls bar */
.tm-controls{
  border-top-color: var(--color9);
}
/* buttons */
.tm-controls button{
  background:var(--color8);
  border-color: var(--color9);
}
/* era label */
#currentEra{
  color:var(--color1);
}
.relationship-entry {
  border-left-color: var(--color3);
}
.relation-type {
  color: var(--color2);
}

/* (all other selectors have no theme properties and are omitted here for cleanliness while preserving overall format/order) */