/* ============================================================
   VARIABLES.CSS — SCP/SF Blog Theme System
   ============================================================ */

/* ── DARK MODE (default) ── */
[data-theme="dark"] {
  --bg-primary:    #06060f;
  --bg-secondary:  #0d0d1e;
  --bg-tertiary:   #111128;
  --bg-card:       #0f0f22;
  --text-primary:  #e0e8f0;
  --text-secondary:#8899aa;
  --text-muted:    #445566;
  --accent:        #00e5ff;
  --accent-2:      #00ff88;
  --accent-warn:   #ff3c3c;
  --accent-yellow: #ffe100;
  --border:        #1e2a3a;
  --border-accent: #00e5ff44;
  --scanline:      rgba(0,229,255,0.03);
  --glow:          0 0 20px rgba(0,229,255,0.25);
  --glow-sm:       0 0 8px rgba(0,229,255,0.3);
  --shadow:        0 4px 24px rgba(0,0,0,0.6);
  --header-bg:     rgba(6,6,15,0.95);
  --hero-bg:       linear-gradient(160deg, #06060f 0%, #0a0a20 50%, #060618 100%);
  --scrollbar-bg:  #0d0d1e;
  --scrollbar-thumb: #00e5ff44;
  --badge-bg:      rgba(0,229,255,0.12);
  --badge-color:   #00e5ff;
  --tag-bg:        rgba(0,255,136,0.08);
  --tag-color:     #00ff88;
  --skeleton-from: #111128;
  --skeleton-to:   #1a1a3a;
  --overlay-bg:    rgba(6,6,15,0.85);
  --glass-bg:      rgba(13,13,30,0.6);
  --input-bg:      #0d0d1e;
  --bg-hover:      #1a1a35;
  --bg-base:       #06060f;
  --rank-s:        #ff6b35;
  --rank-a:        #00e5ff;
  --rank-b:        #00ff88;
  --rank-c:        #ffe100;
  --rank-d:        #8899aa;
}

/* ── LIGHT MODE ── */
[data-theme="light"] {
  --bg-primary:    #f2f2ed;
  --bg-secondary:  #ffffff;
  --bg-tertiary:   #e8e8e0;
  --bg-card:       #ffffff;
  --text-primary:  #1a1a1a;
  --text-secondary:#555555;
  --text-muted:    #999999;
  --accent:        #a30000;
  --accent-2:      #003580;
  --accent-warn:   #cc0000;
  --accent-yellow: #c28000;
  --border:        #d0d0c8;
  --border-accent: #a3000044;
  --scanline:      transparent;
  --glow:          0 2px 12px rgba(163,0,0,0.15);
  --glow-sm:       0 1px 6px rgba(163,0,0,0.2);
  --shadow:        0 2px 16px rgba(0,0,0,0.12);
  --header-bg:     rgba(242,242,237,0.97);
  --hero-bg:       linear-gradient(160deg, #1a1a1a 0%, #2a2a3a 50%, #1a1a2a 100%);
  --scrollbar-bg:  #e8e8e0;
  --scrollbar-thumb:#a3000066;
  --badge-bg:      rgba(163,0,0,0.08);
  --badge-color:   #a30000;
  --tag-bg:        rgba(0,53,128,0.08);
  --tag-color:     #003580;
  --skeleton-from: #e8e8e0;
  --skeleton-to:   #d8d8d0;
  --overlay-bg:    rgba(242,242,237,0.9);
  --glass-bg:      rgba(255,255,255,0.7);
  --input-bg:      #ffffff;
  --bg-hover:      #e0e0d8;
  --bg-base:       #f2f2ed;
  --rank-s:        #ff4500;
  --rank-a:        #a30000;
  --rank-b:        #003580;
  --rank-c:        #c28000;
  --rank-d:        #666666;
}

/* ── PURPLE MODE ── */
[data-theme="purple"] {
  --bg-primary:    #0a0a1a;
  --bg-secondary:  rgba(255,255,255,0.04);
  --bg-tertiary:   rgba(255,255,255,0.07);
  --bg-card:       rgba(255,255,255,0.06);
  --text-primary:  #f0f4ff;
  --text-secondary:#a0b0c8;
  --text-muted:    #607080;
  --accent:        #88aaff;
  --accent-2:      #ff88cc;
  --accent-warn:   #ff6655;
  --accent-yellow: #ffcc44;
  --border:        rgba(255,255,255,0.12);
  --border-accent: rgba(136,170,255,0.4);
  --scanline:      transparent;
  --glow:          0 4px 32px rgba(136,170,255,0.2);
  --glow-sm:       0 0 12px rgba(136,170,255,0.3);
  --shadow:        0 8px 32px rgba(0,0,0,0.4);
  --header-bg:     rgba(10,10,26,0.6);
  --hero-bg:       linear-gradient(160deg, #0a0a1a 0%, #120a2a 50%, #0a1020 100%);
  --scrollbar-bg:  rgba(255,255,255,0.04);
  --scrollbar-thumb: rgba(136,170,255,0.3);
  --badge-bg:      rgba(136,170,255,0.15);
  --badge-color:   #88aaff;
  --tag-bg:        rgba(255,136,204,0.12);
  --tag-color:     #ff88cc;
  --skeleton-from: rgba(255,255,255,0.04);
  --skeleton-to:   rgba(255,255,255,0.1);
  --overlay-bg:    rgba(10,10,26,0.7);
  --glass-bg:      rgba(255,255,255,0.06);
  --input-bg:      rgba(255,255,255,0.06);
  --bg-hover:      rgba(255,255,255,0.12);
  --bg-base:       #0a0a1a;
  --rank-s:        #ff88cc;
  --rank-a:        #88aaff;
  --rank-b:        #44ffcc;
  --rank-c:        #ffcc44;
  --rank-d:        #a0b0c8;
}

/* ── BLACK MODE (Terminal Dossier) ── */
[data-theme="black"] {
  --bg-primary:    #000000;
  --bg-secondary:  #080808;
  --bg-tertiary:   #101010;
  --bg-card:       #0c0c0c;
  --text-primary:  #e8c281;
  --text-secondary:#98a088;
  --text-muted:    #4a4d3f;
  --accent:        #e8c281;
  --accent-2:      #9dffb0;
  --accent-warn:   #e07e5a;
  --accent-yellow: #e8c281;
  --border:        #1a1a1a;
  --border-accent: rgba(232,194,129,0.3);
  --scanline:      rgba(232,194,129,0.015);
  --glow:          0 0 20px rgba(232,194,129,0.2);
  --glow-sm:       0 0 8px rgba(232,194,129,0.25);
  --shadow:        0 4px 24px rgba(0,0,0,0.9);
  --header-bg:     rgba(0,0,0,0.97);
  --hero-bg:       linear-gradient(160deg, #000000 0%, #0a0800 50%, #050500 100%);
  --scrollbar-bg:  #080808;
  --scrollbar-thumb: rgba(232,194,129,0.3);
  --badge-bg:      rgba(232,194,129,0.1);
  --badge-color:   #e8c281;
  --tag-bg:        rgba(157,255,176,0.08);
  --tag-color:     #9dffb0;
  --skeleton-from: #101010;
  --skeleton-to:   #1a1a1a;
  --overlay-bg:    rgba(0,0,0,0.92);
  --glass-bg:      rgba(10,8,0,0.6);
  --input-bg:      #080808;
  --bg-hover:      #1c1c1c;
  --bg-base:       #000000;
  --rank-s:        #e07e5a;
  --rank-a:        #e8c281;
  --rank-b:        #9dffb0;
  --rank-c:        #cfd3c0;
  --rank-d:        #6b7464;
}

/* ── PURPLE MODE backdrop effects ── */
[data-theme="purple"] body {
  background: linear-gradient(135deg, #050510 0%, #0a0520 40%, #050a20 70%, #020510 100%);
}

/* Animated ambient orbs */
[data-theme="purple"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 25%, rgba(80,120,255,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 60% 55% at 85% 70%, rgba(200,80,255,0.3) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 55% 5%,  rgba(60,220,180,0.2) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 30% 85%, rgba(255,100,150,0.2) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: purpleOrbs 12s ease-in-out infinite alternate;
}
@keyframes purpleOrbs {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.75; transform: scale(1.05) rotate(2deg); }
  100% { opacity: 1; transform: scale(1); }
}

/* BLACK MODE scanline */
[data-theme="black"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    var(--scanline) 0px,
    var(--scanline) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 9999;
}

/* Purple card surface */
[data-theme="purple"] .card,
[data-theme="purple"] .sidebar-widget,
[data-theme="purple"] .chart-card,
[data-theme="purple"] .profile-full,
[data-theme="purple"] .calendar-widget,
[data-theme="purple"] .stat-card,
[data-theme="purple"] .skill-item,
[data-theme="purple"] .skills-table tr,
[data-theme="purple"] .hero-content-box {
  backdrop-filter: blur(28px) saturate(220%) brightness(1.1);
  -webkit-backdrop-filter: blur(28px) saturate(220%) brightness(1.1);
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: 0 4px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
}
[data-theme="purple"] .card:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(136,170,255,0.5) !important;
  box-shadow: 0 8px 48px rgba(100,130,255,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Header purple */
[data-theme="purple"] .site-header {
  backdrop-filter: blur(40px) saturate(250%) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(250%) brightness(1.05);
  background: rgba(5,5,20,0.5) !important;
  border-bottom-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.4);
}

/* Mega menu purple */
[data-theme="purple"] .mega-menu,
[data-theme="purple"] .mobile-menu {
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  background: rgba(8,8,28,0.7) !important;
}

/* Tag / badge purple tint */
[data-theme="purple"] .badge {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Frosted highlight line on top of cards */
[data-theme="purple"] .card::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  pointer-events: none;
}

/* Footer purple */
[data-theme="purple"] .site-footer {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: rgba(5,5,20,0.6) !important;
}

/* Sidebar widget purple */
[data-theme="purple"] .widget-title {
  background: rgba(255,255,255,0.05) !important;
}

/* Skill bars glow on purple */
[data-theme="purple"] .skill-bar {
  box-shadow: 0 0 12px rgba(136,170,255,0.6);
}
[data-theme="purple"] .stat-value {
  text-shadow: 0 0 20px rgba(136,170,255,0.7);
}
[data-theme="purple"] .logo-mark {
  text-shadow: 0 0 12px rgba(136,170,255,0.5);
}

/* Skill bars glow on black */
[data-theme="black"] .skill-bar {
  box-shadow: 0 0 8px rgba(232,194,129,0.4);
}
[data-theme="black"] .stat-value {
  text-shadow: 0 0 16px rgba(232,194,129,0.5);
}
[data-theme="black"] .logo-mark {
  text-shadow: 0 0 10px rgba(232,194,129,0.4);
}

/* ── GLOBAL BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --header-h: 64px;
  --sidebar-w: 300px;
  --font-mono: 'Space Mono', 'Share Tech Mono', monospace;
  --font-sans: 'Noto Sans JP', sans-serif;
  --transition: 0.25s cubic-bezier(0.4,0,0.2,1);
  --radius: 4px;
  --radius-lg: 8px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
  position: relative;
}

/* Scanline overlay (dark mode) */
[data-theme="dark"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    var(--scanline) 0px,
    var(--scanline) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 9999;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* Selection */
::selection { background: var(--accent); color: #000; }

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-2); }

img { max-width: 100%; display: block; }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

code { padding: 0.15em 0.4em; }
pre { padding: 1rem; overflow-x: auto; }