/* Re:awakening Collective — base element styling & helper classes.
   Light reset + brand defaults. Imported last from styles.css. */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-primary);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

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

::selection { background: var(--rac-blue); color: #fff; }

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

/* ---- Brand utility classes ---- */
.rac-overline {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.rac-display {
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}

/* The accent rule used in the wordmark lockup (Strategy-first. etc.) */
.rac-accent-rule {
  border-left: var(--bw-bold) solid var(--rac-blue);
  padding-left: var(--sp-3);
}

.rac-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Component interaction states (hover/press) ---- */
.rac-btn:hover:not(:disabled) { transform: translateY(-1px); }
.rac-btn:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.rac-btn--primary:hover:not(:disabled) { background: var(--rac-blue-600) !important; border-color: var(--rac-blue-600) !important; }
.rac-btn--inverse:hover:not(:disabled) { background: var(--rac-n-800) !important; border-color: var(--rac-n-800) !important; }
.rac-btn--outline:hover:not(:disabled) { background: var(--rac-ink) !important; color: var(--rac-paper) !important; }
.rac-btn--ghost:hover:not(:disabled) { background: var(--rac-n-100) !important; }

.rac-iconbtn:hover:not(:disabled) { background: var(--rac-n-100); }
.rac-iconbtn--accent:hover:not(:disabled) { background: var(--rac-blue-600) !important; }

.rac-card--interactive { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.rac-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-default); }

.rac-input:focus { outline: none; border-color: var(--rac-blue) !important; box-shadow: 0 0 0 3px var(--rac-blue-100); }
.rac-tag--clickable:hover { background: var(--rac-ink) !important; color: var(--rac-paper) !important; border-color: var(--rac-ink) !important; }
.rac-navlink { position: relative; }
.rac-navlink::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0; background: var(--rac-blue); transition: width var(--dur-base) var(--ease-out); }
.rac-navlink:hover::after, .rac-navlink[data-active="true"]::after { width: 100%; }