/* ÓPERA ARTE — Base layer: light resets + a few brand primitives.
   Kept intentionally small. Component styling lives in the React components. */

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

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

::selection { background: rgba(219,166,33,0.28); color: var(--oa-cream); }

/* Headings default to display family, medium weight */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin: 0;
}

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

/* ---- Brand primitives (utility classes) ---- */

/* Eyebrow: spaced uppercase micro-label echoing the wordmark */
.oa-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent-gold);
}

/* Handwritten signature accent. Honeyloops ink is much taller than its em box,
   so give it generous vertical room to avoid overlapping neighboring text. */
.oa-script {
  font-family: var(--font-script);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  line-height: 1.45;
}

/* The gold gradient "fio" — a hairline divider */
.oa-fio {
  height: 1px;
  border: 0;
  width: 100%;
  background: var(--oa-gradient-gold-soft);
}

/* Vertical variant */
.oa-fio--v {
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
    rgba(91,30,22,0) 0%, #945020 20%, #CF9C50 50%, #DBBA93 80%, rgba(160,90,22,0) 100%);
}

/* Gentle entrance settle. Transform-only so content is ALWAYS fully visible
   (opacity stays 1) even if the animation clock never advances — e.g. when the
   page loads in a background/hidden tab. The visible state is the base style. */
@media (prefers-reduced-motion: no-preference) {
  .oa-fade-in { animation: oaFadeIn var(--dur-slow) var(--ease-out) both; }
  @keyframes oaFadeIn {
    from { transform: translateY(12px); }
    to   { transform: none; }
  }
}