/* ==========================================================================
   REBEL RAGS — BASE  (rr-base.css)
   Reset + global element defaults. Everything binds to tokens. No hard-coded
   colours/fonts/spacing below this line.
   ========================================================================== */

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

html {
  background: var(--rr-bg-deep);
  font-size: 100% !important;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--rr-bg);
  color: var(--rr-text);
  font-family: var(--rr-font-body);
  font-size: var(--rr-fs-2);
  line-height: var(--rr-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: var(--rr-viewport-min-height);
  overflow-x: hidden;               /* zine rotation must never scroll x    */
}

/* ---- Headings --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rr-font-display);
  font-weight: 900;
  line-height: var(--rr-lh-tight);
  letter-spacing: var(--rr-tracking-tight);
  margin: 0 0 var(--rr-space-3);
  color: var(--rr-ink);
  text-wrap: balance;
}
h1 { font-size: var(--rr-fs-7); text-transform: uppercase; }
h2 { font-size: var(--rr-fs-6); text-transform: uppercase; }
h3 { font-size: var(--rr-fs-5); }
h4 { font-size: var(--rr-fs-4); }
h5 { font-size: var(--rr-fs-3); }
h6 { font-size: var(--rr-fs-2); font-family: var(--rr-font-label); text-transform: uppercase; letter-spacing: var(--rr-tracking-wide); }

p  { margin: 0 0 var(--rr-space-3); }
p:last-child { margin-bottom: 0; }

small { font-size: var(--rr-fs-1); color: var(--rr-text-muted); }
strong, b { font-weight: 700; color: var(--rr-ink); }

/* ---- Links ------------------------------------------------------------ */
a {
  color: var(--rr-link);
  text-decoration: none;
  transition: color var(--rr-dur-fast) var(--rr-ease);
}
a:hover { color: var(--rr-link-hover); text-decoration: underline; text-underline-offset: var(--rr-link-underline-offset); }

/* ---- Lists ------------------------------------------------------------ */
ul, ol { margin: 0 0 var(--rr-space-3); padding-left: var(--rr-space-4); }
li { margin-bottom: var(--rr-space-1); }

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

/* ---- Rules ------------------------------------------------------------ */
hr {
  border: 0;
  border-top: var(--rr-bd) dashed var(--rr-border-strong);
  margin: var(--rr-space-5) 0;
}

/* ---- Code / mono ------------------------------------------------------ */
code, kbd, pre, samp {
  font-family: var(--rr-font-label);
  font-size: var(--rr-code-scale);
}

/* ---- Form elements inherit type --------------------------------------- */
button, input, select, textarea { font: inherit; color: inherit; }

/* ---- Selection -------------------------------------------------------- */
::selection { background: var(--rr-accent); color: var(--rr-accent-ink); }

/* ---- Focus: high-vis yellow, always visible --------------------------- */
:focus-visible {
  outline: var(--rr-bd-thick) solid var(--rr-focus);
  outline-offset: var(--rr-focus-offset);
}
:focus:not(:focus-visible) { outline: none; }

/* ---- Scrollbar (webkit) ----------------------------------------------- */
::-webkit-scrollbar { width: var(--rr-scrollbar-size); height: var(--rr-scrollbar-size); }
::-webkit-scrollbar-track { background: var(--rr-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--rr-surface-3); border: var(--rr-bd) solid var(--rr-bg-deep); }
::-webkit-scrollbar-thumb:hover { background: var(--rr-accent); }

/* ---- Accessibility helpers -------------------------------------------- */
.rr-visually-hidden {
  position: absolute !important;
  width: var(--rr-visually-hidden-size); height: var(--rr-visually-hidden-size);
  padding: 0; margin: var(--rr-visually-hidden-offset);
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.rr-skip-link {
  position: absolute; left: var(--rr-space-2); top: var(--rr-skip-link-hidden-offset);
  background: var(--rr-accent); color: var(--rr-accent-ink);
  padding: var(--rr-space-2) var(--rr-space-3); font-family: var(--rr-font-label);
  font-weight: 700; z-index: var(--rr-z-toast); transition: top var(--rr-dur) var(--rr-ease);
}
.rr-skip-link:focus { top: var(--rr-space-2); text-decoration: none; }