/* =========================================================================
   Alice Designs — Base element styles & primitives
   Lightweight resets + a few opinionated defaults so raw HTML already
   looks "on brand". Utility-ish helpers are namespaced with .ad-.
   ========================================================================= */

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

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-semibold); }

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

a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }

small { font-size: var(--text-sm); }

code, kbd, samp {
  font-family: var(--font-code);
  font-size: 0.9em;
}

hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-6) 0;
}

::selection { background: var(--green-300); color: var(--ink-900); }

/* --- Editorial helpers -------------------------------------------------- */

.ad-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
}

/* Eyebrow pairs with body copy: label left, copy right-aligned. */
.ad-eyebrow-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4) var(--space-7);
  align-items: baseline;
}
.ad-eyebrow-row > .ad-eyebrow { text-align: left; }
.ad-eyebrow-row > .ad-eyebrow-body {
  grid-column: 2;
  text-align: left;
  margin: 0;
  color: var(--text-body);
  text-wrap: pretty;
}

.ad-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-light);
  color: var(--text-strong);
}

.ad-serif-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
}

.ad-lead {
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

/* --- Component interaction states (shipped with the token closure) ------ */

.ad-btn-primary:not(:disabled):hover { background: var(--accent-hover); }
.ad-btn-primary:not(:disabled):active { background: var(--accent-press); transform: translateY(1px); }
.ad-btn-secondary:not(:disabled):hover { background: var(--surface-sunken); border-color: var(--border-strong); }
.ad-btn-secondary:not(:disabled):active { transform: translateY(1px); }
.ad-btn-ghost:not(:disabled):hover { background: var(--surface-sunken); }
.ad-btn-ghost:not(:disabled):active { transform: translateY(1px); }
.ad-btn-inverse:not(:disabled):hover { background: var(--sand-300); }
.ad-btn-inverse:not(:disabled):active { transform: translateY(1px); }

.ad-focusable:focus-visible { outline: none; box-shadow: var(--ring); }

.ad-input {
  width: 100%;
  height: var(--control-h-md);
  padding: 0 14px;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ad-input::placeholder { color: var(--text-faint); }
.ad-input:hover { border-color: var(--border-strong); }
.ad-input:focus-visible { outline: none; border-color: var(--border-strong); }
.ad-input:disabled { opacity: 0.55; cursor: not-allowed; background: var(--surface-sunken); }

.ad-card-interactive { cursor: pointer; }
.ad-card-interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }