/* ============================================================
   PAPERPIXEL PORTFOLIO — Dark Mode Overrides
   File: dark-mode.css
   Author: ImajikoStudio
   Version: 1.0.0
============================================================ */

body.dark-mode {
  /* --- Dark Mode Variables (Calm Chalkboard Theme) --- */
  --color-bg-base:       #18191f;   /* Deep carbon chalkboard black */
  --color-bg-surface:    #22232a;   /* Raised charcoal card surface */
  --color-bg-raised:     #2b2d37;   /* Elevated dark card */
  
  --color-border:        #e6e6ec;   /* Soft off-white borders */
  --color-border-rgb:    230, 230, 236;
  
  /* Text Color System */
  --color-text-primary:   #f1f2f6;   /* Bone white */
  --color-text-secondary: #a4a7b5;   /* Calm slate grey */
  --color-text-muted:     #6d707f;   /* Darker muted grey */
  --color-text-inverse:   #18191f;   /* Dark base for inverted elements */
  
  /* Accents adjusted for dark mode contrast */
  --color-accent-blue:    #709bff;   /* Brighter pastel blue */
  --color-accent-peach:   #ffb37c;   /* Soft glowing peach */
  --color-accent-green:   #a3e23d;   /* Brighter sage green */
  --color-accent-purple:  #b388ff;   /* Lighter lavender */
  --color-accent-red:     #ff8b73;   /* Pastel red-coral */
  
  /* Update border styles with light shadow on dark bg */
  --shadow-flat:          0 0 0 var(--color-border);
  --shadow-sm:            2px 2px 0 0 var(--color-border);
  --shadow-md:            4px 4px 0 0 var(--color-border);
  --shadow-lg:            8px 8px 0 0 var(--color-border);
}

/* Specific component tweaks in Dark Mode */
body.dark-mode .header {
  background-color: var(--color-bg-base);
}

body.dark-mode .mobile-nav {
  background-color: var(--color-bg-base);
}

body.dark-mode .skip-link {
  color: var(--color-text-inverse);
}

body.dark-mode .sticky-note {
  /* Sticky notes retain their physical colors (yellow, blue, etc.) for skeuomorphism,
     but we make sure the borders are dark mode compatible */
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

body.dark-mode .polaroid {
  /* Polaroids stay white physically, but we match the border and shadow to dark mode */
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

body.dark-mode .music-player__disc {
  background: radial-gradient(circle, #444 40%, #111 41%, #111 80%, var(--color-accent-blue) 81%);
}