/* ============================================================
   QRTask Base Styles
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-neutral-800);
  background: var(--color-neutral-50);
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Typography scale ---- */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-neutral-900);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.375rem); }
h4 { font-size: 1.125rem; }

p {
  margin-bottom: 0.75rem;
  color: var(--color-neutral-700);
}
p:last-child { margin-bottom: 0; }

small {
  font-size: 0.8125rem;
  color: var(--color-neutral-500);
}

strong { font-weight: 600; }
em     { font-style: italic; }

ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-neutral-700);
}
li { margin-bottom: 0.25rem; }

hr {
  border: none;
  border-top: 1px solid var(--color-neutral-200);
  margin: 1.5rem 0;
}

/* ---- Links ---- */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* ---- Focus rings ---- */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Images / Media ---- */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---- Code ---- */
code, kbd, pre {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  background: var(--color-neutral-100);
  border-radius: var(--radius-sm);
}
code { padding: 0.1em 0.4em; }
pre {
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  border: 1px solid var(--color-neutral-200);
}

/* ---- Tables ---- */
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  text-align: left;
  padding: 0.625rem 0.875rem;
}
th {
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-neutral-500);
}

/* ---- Selection ---- */
::selection {
  background: var(--color-primary-light);
  color: var(--color-primary-darker);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--color-neutral-300); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover  { background: var(--color-neutral-400); }

/* ---- Utility: visually hidden (accessible) ---- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---- Transitions ---- */
.transition { transition: all 0.2s ease; }
.transition-fast { transition: all 0.1s ease; }

/* ---- User content HTML rendering (card-html) ---- */
.user-html h1,
.user-html h2,
.user-html h3,
.user-html h4 { margin-bottom: 0.5rem; margin-top: 1rem; }
.user-html p  { margin-bottom: 0.75rem; }
.user-html ul,
.user-html ol { margin-bottom: 0.75rem; }
.user-html img { border-radius: var(--radius-md); max-width: 100%; }
.user-html a   { color: var(--color-primary); }
.user-html blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: 1rem;
  color: var(--color-neutral-600);
  font-style: italic;
  margin: 1rem 0;
}