/* === Dark Energy Theme === */
/* Load after all other CSS files like base.css, typography.css, nav.css, cards.css */
/* Overrides base variables and specific elements */

@import url('https://fonts.googleapis.com/css2?family=Futura:wght@400;700&family=Inter:wght@300;400;600&family=Space+Mono:wght@400;700&display=swap');

/*****************************************************
THEME VARIABLES - Override base.css :root
*****************************************************/
:root {
  /* Dark Energy Color Palette */
  --charcoal: #1C1C1C;
  --navy: #0E1A2B;
  --cream: #c6c4bd;
  --red: #D62828;
  --ochre: hsl(48, 100%, 44%);
  --teal: #009FB7;
  --sage: #A3B18A;

  /* Override base color mappings */
  --bg-primary: var(--navy);
  --bg-secondary: var(--charcoal);
  --bg-tertiary: var(--charcoal);
  --text-primary: var(--cream);
  --text-secondary: #bcbcbc;
  --text-tertiary: var(--cream);
  --accent-primary: var(--red);
  
  /* Override font families */
  --font-heading: "Futura", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "Space Mono", monospace;
  
  /* Accent colors for specific elements */
  --h1-color: var(--red);
  --h2-color: var(--ochre);
  --h3-color: var(--teal);
}


/*****************************************************
BASE ELEMENTS - Override typography.css
*****************************************************/

html, body {
  /* Visual */
  background: var(--bg-primary);
  color: var(--text-primary);
}

h1, h2, h3, h4 {
  /* Typography */
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.05rem;
}

h1 {
  /* Typography */
  color: var(--h1-color);
}

h2 {
  /* Typography */
  color: var(--h2-color);
}

h3 {
  /* Typography */
  color: var(--h3-color);
}

p {
  /* Typography */
  font-size: 18px;
}


/*****************************************************
LINKS - Override base.css link styles
*****************************************************/

a {
  /* Positioning */
  position: relative;
  
  /* Typography */
  color: var(--accent-primary);
  font-weight: 600;
}

a::after {
  /* Positioning */
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  
  /* Box Model */
  width: 100%;
  height: 1px;
  
  /* Visual */
  background: var(--accent-primary);
  transform: scaleX(0);
  transform-origin: left;
  
  /* Interactivity */
  transition: transform 0.1s ease;
}

a:hover::after {
  /* Visual */
  transform: scaleX(1);
}


/*****************************************************
CODE BLOCKS - Override typography.css
*****************************************************/

.highlight {
  /* Typography */
  font-family: var(--font-mono);
  font-size: .9em;
  color: #333;
  
  /* Visual */
  background: #7ec4ea;
  border-radius: var(--radius-md);
}


/*****************************************************
NAVIGATION - Override nav.css
*****************************************************/

nav,
.navbar {
  /* Visual */
  background: var(--bg-secondary);
}

nav a,
.navbar-nav a {
  /* Typography */
  font-family: var(--font-mono);
  color: var(--text-primary);
}

nav a:hover,
.navbar-nav a:hover {
  /* Typography */
  color: var(--accent-primary);
}


/*****************************************************
CARDS - Override cards.css
*****************************************************/

.card {
  /* Typography */
  color: var(--charcoal);
  
  /* Visual */
  background: var(--cream);
  border-radius: var(--radius-lg);
  
  /* Interactivity */
  transition: transform 0.2s ease;
}

.card:hover {
  /* Visual */
  transform: translateY(-4px);
}


/*****************************************************
TOC ROWS - Override cards.css .toc-row
*****************************************************/

.toc-row {
  /* Visual */
  background-color: var(--bg-secondary);
  border-left: 3px solid var(--accent-primary);
  
  /* Interactivity */
  transition: all 0.3s ease;
}

.toc-row:hover {
  /* Visual */
  background-color: var(--charcoal);
  border-left-color: var(--teal);
  transform: translateX(8px);
}

.toc-row h3 {
  /* Typography */
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--cream);
}

.toc-arrow {
  /* Interactivity */
  transition: opacity 0.3s ease;
}


/*****************************************************
BUTTONS - Override base.css if present
*****************************************************/

button,
.btn {
  /* Box Model */
  padding: 0.75em 1.5em;
  
  /* Typography */
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--cream);
  
  /* Visual */
  background: var(--accent-primary);
  border: none;
  border-radius: var(--radius-sm);
  
  /* Interactivity */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover,
.btn:hover {
  /* Visual */
  background: var(--ochre);
}


/*****************************************************
FOOTER - Override base.css
*****************************************************/

footer {
  /* Box Model */
  padding: 2em;
  
  /* Typography */
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-align: center;
  
  /* Visual */
  background: var(--charcoal);
}