/* LittleWins — light base/reset. Opt-in element defaults + helpers.
   Kept minimal so it never fights component styles. */
*,*::before,*::after { box-sizing: border-box; }

body.lw {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings default to display font when scoped under .lw */
.lw h1,.lw h2,.lw h3,.lw h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
  color: var(--text-strong);
  margin: 0 0 .4em;
  text-wrap: balance;
}
.lw p { text-wrap: pretty; }

/* Links */
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); text-decoration: underline; text-underline-offset: 2px; }

/* Utility: slanted section-header echo of the logo */
.lw-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-style: italic;
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--brand-green);
}

/* Numerals helper */
.lw-num { font-family: var(--font-num); font-weight: var(--fw-bold); font-feature-settings: 'tnum' 1; }

/* Focus ring */
:where(button,a,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid color-mix(in oklab, var(--focus-ring) 65%, transparent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}