/* ================================================================
   BASE.CSS — Reset, root variables, typography, base elements
   Part of the RustyBlade BootCamp stylesheet, split for maintainability.
   Load order matters: base, layout, components, pages, utilities, themes
   (verified programmatically against every duplicate-selector override
   in the original single-file stylesheet before this split was made).
   ================================================================ */

/**
 * ================================================================
 * RUSTYBLADE · BOOTCAMP – COMPLETE STYLESHEET
 * ================================================================
 */
/* ── HIDE SCROLLBARS EVERYWHERE ── */
html,
body,
#app,
#dashboard,
#pageContent,
* {
  scrollbar-width: none !important;          /* Firefox */
  -ms-overflow-style: none !important;      /* IE/Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#app::-webkit-scrollbar,
#dashboard::-webkit-scrollbar,
#pageContent::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* ================================================================
   SECTION 2: BASE ELEMENTS & RESET
   ================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh; /* fallback */
  min-height: 100dvh; /* FIX: Safari iOS dynamic toolbar — dvh tracks the real visible viewport */
  transition: background 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
p, span, div, button, input, select, textarea,
label, a, li, td, th {
  font-family: var(--font);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  letter-spacing: -0.02em;
}

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

input,
select,
textarea {
  font-family: var(--font);
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  transition: border 0.2s, box-shadow 0.2s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

::selection {
  background: var(--accent);
  color: #fff;
}


/* ================================================================
   SECTION 20: RESPONSIVE FONT SIZES
   ================================================================ */

html {
  font-size: clamp(14px, 2vw, 16px);
}
body {
  font-size: clamp(0.75rem, 1.2vw, 1rem);
}
h1 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.8rem); }
h3 { font-size: clamp(1rem, 2vw, 1.4rem); }
h4 { font-size: clamp(0.875rem, 1.5vw, 1.1rem); }
h5, h6 { font-size: clamp(0.75rem, 1vw, 0.9rem); }
.btn, .btn-sm, .btn-xs {
  font-size: clamp(0.6rem, 0.8vw, 0.78rem);
}
input, select, textarea {
  font-size: clamp(0.875rem, 1.2vw, 1rem);
}
.card, .modal, .toast {
  font-size: clamp(0.7rem, 1vw, 0.9rem);
}