/* ===========================================================================
   roastynote — Base element defaults
   ---------------------------------------------------------------------------
   Light reset + brand defaults wired to tokens. Imported by styles.css after
   the token files so the custom properties resolve.
   =========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  background: var(--surface-page);
  font-feature-settings: "ss01", "cv01";
}

/* Headings reset to inherit; size with utility classes / tokens */
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: inherit; font-size: inherit; line-height: var(--leading-tight); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: color-mix(in oklab, var(--ember) 22%, transparent); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---- A few brand helper classes (optional, used by cards/screens) ------ */
.rn-label {
  font-family: var(--font-label);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  letter-spacing: var(--type-label-track);
  text-transform: uppercase;
  color: var(--text-muted);
}

.rn-quote {
  font-family: var(--font-quote);
  font-style: italic;
  font-size: var(--type-quote-size);
  line-height: var(--type-quote-leading);
  font-weight: var(--type-quote-weight);
  color: var(--text-primary);
}

.rn-measure { max-width: var(--measure); }