/**
 * theme.css — Central theme variables for the portfolio.
 * Link this file in every page so colors and accents can be changed in one place.
 *
 * Dark mode = default (:root).
 * Light mode = [data-theme="light"] (body gets this when theme toggle is "light").
 */

:root {
  /* Backgrounds */
  --bg:      #1c1c1c;
  --bg2:     #242424;
  --bg3:     #2e2e2e;
  /* Paper / text surfaces */
  --paper:   #f3ece0;
  --paper2:  #e8dece;
  --paper3:  #ddd0bc;
  /* Ink (text) */
  --ink:     #1a1612;
  --ink2:    #3d342b;
  --ink3:    #b0aca6;
  --ink4:    #a89880;
  /* Accent */
  --amber:       #F3C016;
  --amber-hover: #e6b800;  /* slightly lighter on hover (dark mode) */
  /* Nav */
  --nav-bg:  rgba(28,28,28,0.96);
  --nav-border: rgba(255,255,255,0.05);
  /* Optional (some pages) */
  --red:     #c84b31;
  --tape:    rgba(255, 220, 110, 0.50);
  --sage:    #4f7252;
  --indigo:  #5a5fa0;
  --rose:    #b85070;
  --sky:     #3a7a9a;
  --plum:    #7a5aa0;
  --map-bg:  #1c1c1c;
  --map-spotlight: rgba(28, 22, 10, 0.65);
  --surface: #f3ece0;
  --surface2: #e8dece;
}

[data-theme="light"] {
  --bg:      #f5f5f3;
  --bg2:     #eaeae8;
  --bg3:     #dededd;
  --paper:   #fefefe;
  --paper2:  #ededeb;
  --paper3:  #5c5248;
  --ink:     #1a1612;
  --ink2:    #3d342b;
  --ink3:    #575450;
  --ink4:    #696663;
  --amber:       #7c4f0c;
  --amber-hover: #8e5e18;  /* lighter brown on hover (light mode) */
  --nav-bg:      rgba(245,245,243,0.93);
  --nav-border: rgba(0,0,0,0.06);
  --map-bg:  #f5f5f3;
  --map-spotlight: rgba(200,198,194,0.4);
  --surface: #fefefe;
  --surface2: #ededeb;
}

/* Accent button/link hover — edit --amber-hover in the blocks above to change */
.nav-cta:hover { background: var(--amber-hover); }
[data-theme="light"] .nav-cta:hover { opacity: 1; }