/* ==========================================================
   WISAXIS RESUME MAKER — GLOBAL BODY, TYPOGRAPHY & THEME
   Sets base body appearance, typography smoothing, heading hierarchy,
   scrollbars, text selection, and dark/light theme switching.
   ========================================================== */

/* ===== DOCUMENT & BODY BASE ===== */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--text-main);
  line-height: var(--leading-normal);
  background: var(--bg-primary);
  background-color: var(--bg-base);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: var(--transition-theme);
}

/* ===== GLOBAL TYPOGRAPHY HIERARCHY ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text-main);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin: 0 0 0.5rem;
}

h1 {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tighter);
  font-weight: 800;
}

h2 {
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}

h3 {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-snug);
  font-weight: 700;
}

h4 {
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
}

h5 {
  font-size: var(--text-lg);
  font-weight: 600;
}

h6 {
  font-size: var(--text-base);
  font-weight: 600;
}

p {
  margin: 0 0 1rem;
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

a:hover {
  color: var(--primary-hover);
}

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

code {
  background: var(--surface-2);
  color: var(--primary);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-subtle);
}

/* Text Selection Color */
::selection {
  background: rgba(14, 165, 233, 0.35);
  color: var(--text-main);
}

html[data-theme="light"] ::selection {
  background: rgba(4, 120, 87, 0.20);
  color: #022c22;
}

/* ===== GLOBAL SCROLLBARS ===== */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ===== THEME TOGGLE BUTTON ===== */
#theme-toggle,
.theme-toggle {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  color: var(--text-main);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  padding: 0;
  transition: var(--transition);
  position: relative;
  backdrop-filter: blur(10px);
}

#theme-toggle:hover,
.theme-toggle:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  transform: rotate(18deg) scale(1.06);
  box-shadow: 0 0 20px var(--primary-glow);
}

html[data-theme="light"] #theme-toggle,
html[data-theme="light"] .theme-toggle {
  background: var(--surface-3);
  border-color: var(--border-default);
  color: var(--text-main);
  box-shadow: var(--shadow-xs);
}

html[data-theme="light"] #theme-toggle:hover,
html[data-theme="light"] .theme-toggle:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

/* Theme Icon Visibility Switch */
.theme-icon-sun {
  display: none;
}

.theme-icon-moon {
  display: block;
}

html[data-theme="light"] .theme-icon-sun {
  display: block;
}

html[data-theme="light"] .theme-icon-moon {
  display: none;
}

/* ===== TEMPLATE SHELL BODY (Resume Viewer) ===== */
body.template-shell {
  min-height: 100vh;
  position: relative;
  background: var(--bg-base);
  color: var(--shell-text);
  font-family: var(--font-body);
}

html[data-theme="light"] body.template-shell {
  background: #f1f5f9;
  color: var(--text-main);
}