/* ==========================================================================
   catknows. — Base / Reset Styles
   Warm & Friendly Design System

   Load order: tokens.css → components.css → default.css → page <style>
   ========================================================================== */

@font-face { font-family: 'font'; src: url('/inter.ttf'); font-display: swap; }

/* --- Reset / Globals --- */
html, body {
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
  padding: 0;
  margin: 0;
  /* color-scheme is set in tokens.css (:root / :root[data-theme="light"]) */
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* --- Body offset for fixed navbar --- */
body { padding-top: 60px; }

/* --- Form elements (legacy base) --- */
input::placeholder { color: var(--color-text-disabled); }
select, input, button {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  padding: 6px 14px;
  background-color: var(--color-bg-secondary);
  cursor: pointer;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
}
select:hover, button:hover, input:hover {
  background-color: var(--color-bg-tertiary);
}

/* --- Articles & Dialogs (legacy base) --- */
article, dialog {
  color: var(--color-text-primary);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
article { margin: var(--space-2); }

/* --- Accent color: headings, links, buttons, selects use brand color --- */
button, a, select, b, h1, h2, h3, h4, h5, h6 { color: var(--brand-primary); }
input[type="checkbox"] { accent-color: var(--brand-primary); }

/* --- Links --- */
a { text-decoration: none; }

/* --- Pre / Code --- */
pre {
  overflow-wrap: break-word;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-break: break-all;
}

/* --- Small text --- */
small {
  color: var(--color-text-disabled);
  display: inline-block;
}

/* --- Checkbox --- */
input[type="checkbox"] {
  transform: scale(1.2);
}

/* --- Dialog / Modal (legacy base) --- */
dialog::backdrop { background: var(--modal-backdrop); }
body:has(dialog[open]) { overflow: hidden; }
dialog { min-height: auto; padding-top: 0px; }

/* --- Label --- */
label { color: var(--color-text-primary); }