/**
 * THEMES.DARK
 * Overrides CSS custom properties on html[data-theme="dark"].
 * All visual rules live in themes.light.css and reference these variables.
 */

html[data-theme="dark"] {
  --color-primary:       #F8BB10;
  --color-primary-hover: #ffd04d;

  --color-bg:      #141414;
  --color-text:    #9a9a9a;
  --color-heading: #c8c8c8;
  --color-border:  #2c2c2c;

  --color-section-header-bg:  #1c1c1c;
  --color-section-content-bg: #202020;

  --color-section-odd-bg:           #1c1c1c;
  --color-section-odd-content-bg:   #202020;
  --color-section-even-bg:          #181818;
  --color-section-even-content-bg:  #1e1e1e;

  --color-social-btn-bg:     #272727;
  --color-social-btn-border: #353535;
  --color-icon:              #404040;
  --color-icon-social:       #505050;

  --color-overlay-bg:   #1c1c1c;
  --color-overlay-text: #c8c8c8;
  --color-overlay-deco: #707070;

  --color-timeline-shadow:      #202020;
  --color-timeline-shadow-even: #1e1e1e;

  --color-title-first:  #9a9a9a;
  --color-title-second: #F8BB10;
  --color-subtitle:     #9a9a9a;

  --color-theme-toggle-bg:     #272727;
  --color-theme-toggle-border: #404040;
  --color-theme-toggle-text:   #c8c8c8;
  --color-theme-toggle-shadow: rgba(0, 0, 0, 0.4);
}

/* In dark mode, show sun (to go back to light), hide moon */
html[data-theme="dark"] .c-theme-toggle__sun  { display: block; }
html[data-theme="dark"] .c-theme-toggle__moon { display: none; }