/* ───────────────────────────────────────────────────────────────
   Manga Dark & Light Theme + Japanese Aesthetic Enhancements
─────────────────────────────────────────────────────────────── */

/* ── Color Variables ── */
/* Dark mode - manga black/white/gray */
:root, 
html.dark {
  --bg: #000000;
  --bg0: #000000;
  --bg0_h: #000000;
  --bg0_s: #111111;
  --bg1: #222222;
  --bg2: #333333;
  --bg3: #444444;
  --bg4: #555555;
  
  --fg: #ffffff;
  --fg0: #ffffff;
  --fg1: #eeeeee;
  --fg2: #dddddd;
  --fg3: #cccccc;
  --fg4: #bbbbbb;
  
  --gray1: #888888;
  --gray2: #777777;
  
  --red1: #888888;
  --red2: #999999;
  --green1: #777777;
  --green2: #888888;
  --yellow1: #aaaaaa;
  --yellow2: #bbbbbb;
  --blue1: #666666;
  --blue2: #777777;
  --purple1: #666666;
  --purple2: #777777;
  --aqua1: #777777;
  --aqua2: #888888;
  --orange1: #888888;
  --orange2: #999999;
  
  --background: #000000;
  --foreground: #ffffff;
  --accent: #ffffff;
  --accent2: #cccccc;
  --accent3: #aaaaaa;
  --accent4: #888888;
  --accent5: #777777;
  --accent6: #666666;
  --accent7: #999999;
  --muted: #777777;
}

/* Light mode - manga paper */
html.light {
  --bg: #ffffff;
  --bg0: #ffffff;
  --bg0_h: #fafafa;
  --bg0_s: #f5f5f5;
  --bg1: #eeeeee;
  --bg2: #dddddd;
  --bg3: #cccccc;
  --bg4: #bbbbbb;
  
  --fg: #000000;
  --fg0: #000000;
  --fg1: #111111;
  --fg2: #222222;
  --fg3: #333333;
  --fg4: #444444;
  
  --gray1: #777777;
  --gray2: #888888;
  
  --red1: #777777;
  --red2: #666666;
  --green1: #888888;
  --green2: #777777;
  --yellow1: #555555;
  --yellow2: #444444;
  --blue1: #999999;
  --blue2: #888888;
  --purple1: #999999;
  --purple2: #888888;
  --aqua1: #888888;
  --aqua2: #777777;
  --orange1: #777777;
  --orange2: #666666;
  
  --background: #ffffff;
  --foreground: #000000;
  --accent: #000000;
  --accent2: #333333;
  --accent3: #555555;
  --accent4: #777777;
  --accent5: #888888;
  --accent6: #999999;
  --accent7: #666666;
  --muted: #888888;
}

/* ── Responsive Image Handling ── */
@media (min-width: 768px) {
  .portfolio img,
  .content img {
    max-width: 600px;
    width: 70%;
    height: auto;
  }
}

@media (max-width: 767px) {
  .portfolio img,
  .content img {
    max-width: 100%;
    height: auto;
  }
}

.post-content img {
  max-width: 270px;
  width: 70%;
  height: auto;
  display: block;
  margin: 0;
}

@media (max-width: 480px) {
  .post-content img {
    max-width: 100px;
  }
}

/* ── Self-hosted Japanese Fonts ── */
@font-face {
    font-family: 'Zen Kaku Gothic New';
    src: url('https://fonts.elijahu.me/zen-kaku-gothic-new/zen-kaku-gothic-new-v17-japanese_latin_latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Serif JP';
    src: url('https://fonts.elijahu.me/noto-serif-jp/noto-serif-jp-v31-japanese_latin-300.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ── Typography ── */
/* Base Japanese-friendly font */
body, html {
  font-family: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.8;       /* more breathing room (Japanese rhythm) */
  letter-spacing: 0.02em; /* subtle spacing for elegance */
}

/* Headings in serif JP for manga/chapter vibe */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif JP', 'Zen Kaku Gothic New', serif;
  letter-spacing: 0.05em;
}

/* ── Japanese Aesthetic Enhancements ── */

.vertical-accent-global {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.2rem;
  opacity: 0.6;
  pointer-events: none;
  z-index: 9999;
}


/* Frame boxes (for quotes, highlights, side content) */
.jp-frame {
  border: 2px solid var(--fg3);
  padding: 1rem;
  background: var(--bg1);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Brush stroke style dividers */
hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right, var(--fg0), transparent);
  margin: 2em 0;
}