/* ================================================================
   ANGAD.LOG — base.css
   Variables, Resets, Typography, and Global Utilities
   ================================================================ */

:root {
  --bg:            #09090e; /* Deepest shadow blue */
  --bg-card:       rgba(18, 18, 28, 0.95); 
  --bg-hover:      #1f1f33;
  --bg-sidebar:    #12121c;
  
  /* Primary Accent: Neon Violet */
  --purple:        #b142ff; 
  --purple-bright: #d58bff;
  --purple-dim:    rgba(177, 66, 255, 0.35);
  --purple-faint:  rgba(177, 66, 255, 0.08);
  
  /* Secondary Accent: Cyan */
  --cream:         #00e5ff; 
  --cream-dim:     rgba(0, 229, 255, 0.55);
  
  --text:          #e2e2ec;
  --text-dim:      #8f8f9d;
  --text-faint:    #4d4d60;
  --border:        rgba(177, 66, 255, 0.15);
  --border-mid:    rgba(177, 66, 255, 0.3);
  --green:         #39ffb3;

  /* Tag Palette */
  --tc-life:       #ff42a1;
  --tc-project:    #429bff;
  --tc-work:       #ffb342;
  --tc-reflection: #b142ff;
  --tc-win:        #39ffb3;
  --tc-setback:    #ff5c42;
  --tc-idea:       #00e5ff;
}

/* THEME: Matcha Minimalist */
[data-theme="matcha"] {
  --bg: #111411;
  --bg-card: rgba(22, 28, 22, 0.95);
  --bg-hover: #1e261e;
  --purple: #86b38a;       /* Replacing purple with sage green */
  --purple-bright: #a3cca7;
  --purple-dim: rgba(134, 179, 138, 0.35);
  --purple-faint: rgba(134, 179, 138, 0.08);
  --cream: #e8e3d3;        /* Soft paper white */
  --text: #d6d3c9;
  --text-dim: #949188;
  --border-mid: rgba(134, 179, 138, 0.3);
}

/* THEME: Midnight Dracula */
[data-theme="dracula"] {
  --bg: #282a36;
  --bg-card: rgba(40, 42, 54, 0.95);
  --purple: #ff79c6;
  --purple-bright: #ff92d0;
  --cream: #8be9fd;
  --text: #f8f8f2;
}

/* ── GLOBAL RESET & MOBILE WOBBLE FIX ── */
*, *::before, *::after { 
  box-sizing: border-box !important; 
  margin: 0; 
  padding: 0; 
}

html, body {
  width: 100%;
  max-width: 100vw;
  /* THE FIX: Only hide horizontal overflow. Vertical scrolling MUST stay active! */
  overflow-x: hidden !important; 
  position: relative;
  background: var(--bg);
  color: var(--text);
  font-family: 'Qaaxee', monospace;
  font-size: 18px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ================================================================
   LOCAL CUSTOM FONTS
   ================================================================ */

@font-face { font-family: 'Qaaxee'; src: url('../assets/fonts/qaaxee/qaaxee.ttf') format('truetype'); }


/* ── QAAXEE FONT TAMING ── */
h1, h2, h3, .site-title, .card-title, .category-title {
  letter-spacing: normal !important; 
  line-height: 1.2 !important; 
}
.main-tab, .pw-btn, .sidebar-nav-item, .task-filter-tab {
  line-height: 1 !important; 
  padding-top: 14px !important; 
  padding-bottom: 10px !important;
}


/* ================================================================
   SCROLLBARS & UTILITIES
   ================================================================ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--purple-dim); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple); }

.view { display: none; }
.view.active { display: block; }
.admin-only { display: none !important; }
body.is-admin .admin-only { display: flex !important; }
body.is-admin #tabDash, body.is-admin .write-trigger { display: inline-flex !important; }

/* ── STAR FIELD ── */
#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; 
  pointer-events: none; 
}

.star {
  position: absolute;
  background: #ffd68e;
  border-radius: 0;
}

@keyframes twinkle {
  0%, 100% { opacity: var(--op); }
  50%       { opacity: calc(var(--op) * 0.25); }
}

/* ── TOAST NOTIFICATIONS ── */
.toast { 
  position: fixed; 
  bottom: 2rem; 
  left: 50%; 
  transform: translateX(-50%) translateY(20px); 
  background: var(--bg-card); 
  border: 1px solid var(--purple-dim); 
  border-radius: 4px; 
  color: var(--text); 
  font-family: 'Qaaxee', monospace; 
  font-size: 14px; /* THE FIX: Increased from 7px to 14px */
  padding: 0.8rem 1.2rem; 
  opacity: 0; 
  pointer-events: none; 
  transition: all 0.25s; 
  z-index: 600; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.4); 
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.error { border-color: var(--tc-life); color: var(--tc-life); }

/* ================================================================
   GITHUB CALENDAR DARK MODE OVERRIDE
   ================================================================ */

.github-chart-container {
  width: 100%;
  overflow-x: auto; /* Allows horizontal scrolling on mobile */
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

/* Strip out default backgrounds */
.calendar, .js-calendar-graph {
  border: none !important;
  background: transparent !important;
}

/* Make the text readable */
.calendar text.wday, .calendar text.month {
  fill: var(--text-dim) !important;
  font-size: 10px !important;
  font-family: 'Qaaxee', monospace !important;
}

/* Re-color the contribution squares to match your Synthwave theme! */
.ContributionCalendar-day[data-level="0"], rect.day[data-level="0"] { fill: var(--bg-hover) !important; outline: 1px solid rgba(255,255,255,0.05); outline-offset: -1px; }
.ContributionCalendar-day[data-level="1"], rect.day[data-level="1"] { fill: rgba(177, 66, 255, 0.3) !important; }
.ContributionCalendar-day[data-level="2"], rect.day[data-level="2"] { fill: rgba(177, 66, 255, 0.6) !important; }
.ContributionCalendar-day[data-level="3"], rect.day[data-level="3"] { fill: rgba(177, 66, 255, 0.8) !important; }
.ContributionCalendar-day[data-level="4"], rect.day[data-level="4"] { fill: var(--purple-bright) !important; }