/* dark-mode.css — Token overrides only.
   All component styles live in main.css and use var() natively.
   This file does exactly one thing: swap the design tokens for dark.
   =========================================================================== */

/* Manual toggle: body.dark (set by dark-mode.js) */
body.dark {
  --bg:          #0d1117;
  --bg-card:     #161b22;
  --bg-sub:      #21262d;

  --text:        #c9d1d9;
  --text-muted:  #8b949e;

  --border:      #30363d;
  --border-light:#21262d;

  --link:        #58a6ff;
  --link-hover:  #79c0ff;
  --nav-bg:      #161b22;

  --v3-accent:   #58a6ff;
  --v3-bg:       #1f3a5f;
  --v3-text:     #93c5fd;
  --v4-accent:   #c084fc;
  --v4-bg:       #3b1f5e;
  --v4-text:     #d8b4fe;
  --phd-accent:  #a78bfa;
  --phd-bg:      #2d1f5e;
  --phd-text:    #c4b5fd;

  --warning-bg:     #312207;
  --warning-border: #4d3809;
  --warning-text:   #e3b341;
  --tag-bg:         rgba(31,111,235,0.12);
  --tag-color:      #58a6ff;
  --shadow:         rgba(0,0,0,0.35);
}

/* Dark hero gradient override (gradient can't use CSS vars natively) */
body.dark .hero {
  background: linear-gradient(135deg, #161b22 0%, #1f6feb 100%);
}

/* Dark tier badges (module pages) */
body.dark .tier-1 { background: #064e3b; color: #6ee7b7; }
body.dark .tier-2 { background: #78350f; color: #fde68a; }
body.dark .tier-3 { background: #7f1d1d; color: #fca5a5; }

/* Dark certificate accent bands */
body.dark .cert-1 { background: #1e3a5f; color: #93c5fd; }
body.dark .cert-2 { background: #4a1942; color: #f9a8d4; }
body.dark .cert-3 { background: #064e3b; color: #6ee7b7; }
body.dark .cert-4 { background: #78350f; color: #fde68a; }

/* Dark diploma card */
body.dark .diploma-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-color: var(--link);
}

/* System preference: apply when no manual choice has been made */
@media (prefers-color-scheme: dark) {
  :root:not(.light) body:not(.light) {
    --bg:          #0d1117;
    --bg-card:     #161b22;
    --bg-sub:      #21262d;

    --text:        #c9d1d9;
    --text-muted:  #8b949e;

    --border:      #30363d;
    --border-light:#21262d;

    --link:        #58a6ff;
    --link-hover:  #79c0ff;
    --nav-bg:      #161b22;

    --v3-accent:   #58a6ff;
    --v3-bg:       #1f3a5f;
    --v3-text:     #93c5fd;
    --v4-accent:   #c084fc;
    --v4-bg:       #3b1f5e;
    --v4-text:     #d8b4fe;
    --phd-accent:  #a78bfa;
    --phd-bg:      #2d1f5e;
    --phd-text:    #c4b5fd;

    --warning-bg:     #312207;
    --warning-border: #4d3809;
    --warning-text:   #e3b341;
    --tag-bg:         rgba(31,111,235,0.12);
    --tag-color:      #58a6ff;
    --shadow:         rgba(0,0,0,0.35);
  }
}