/* ============================================================
   DARK / NIGHT MODE
   Night theme: deep green-black, warm muted text
   ============================================================ */

/* ── System preference ───────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:              #0F1F1A;
    --color-bg-alt:          #0A1712;
    --color-reading-bg:      #152820;

    --color-text:            #C8C3BB;
    --color-heading:         #E8E4DC;
    --color-text-muted:      #7A8F88;

    --color-border:          #243B32;
    --color-border-light:    #1D3028;

    --color-link:            #7FB8A8;
    --color-link-hover:      #9ECFBF;

    --color-nav-active-bg:   #1A3028;
    --color-nav-bar:         #7FB8A8;
    --color-ritual-green:    #7FB8A8;
    --color-ritual-green-dark: #9ECFBF;
    --color-ritual-green-dim:  #1A3028;

    --color-code-bg:         #1A2E25;
    --color-progress:        #7FB8A8;
  }
}

/* ── Explicit toggle: dark ───────────────────────────── */
body.dark-mode {
  --color-bg:              #0F1F1A;
  --color-bg-alt:          #0A1712;
  --color-reading-bg:      #152820;

  --color-text:            #C8C3BB;
  --color-heading:         #E8E4DC;
  --color-text-muted:      #7A8F88;

  --color-border:          #243B32;
  --color-border-light:    #1D3028;

  --color-link:            #7FB8A8;
  --color-link-hover:      #9ECFBF;

  --color-nav-active-bg:   #1A3028;
  --color-nav-bar:         #7FB8A8;
  --color-ritual-green:    #7FB8A8;
  --color-ritual-green-dark: #9ECFBF;
  --color-ritual-green-dim:  #1A3028;

  --color-code-bg:         #1A2E25;
  --color-progress:        #7FB8A8;
}

/* ── Explicit toggle: light (override dark system pref) ─ */
body.light-mode {
  --color-bg:              #F0ECE6;
  --color-bg-alt:          #E8E4DC;
  --color-reading-bg:      #FFFFFF;

  --color-text:            #3A3A3A;
  --color-heading:         #1C1C1C;
  --color-text-muted:      #767676;

  --color-border:          #D8D2C8;
  --color-border-light:    #EAE6DF;

  --color-link:            #2F5D50;
  --color-link-hover:      #254A40;

  --color-nav-active-bg:   #E8F1EE;
  --color-nav-bar:         #2F5D50;
  --color-ritual-green:    #2F5D50;
  --color-ritual-green-dark: #254A40;
  --color-ritual-green-dim:  #E8F1EE;

  --color-code-bg:         #EAE6DF;
  --color-progress:        #2F5D50;
}
