/* ==========================================================================
   myAi Design System — Base
   Fonts, reset, elements, core utilities. Depends on tokens.css.
   ========================================================================== */

/* ------------------------------------------------------------------
   Fonts (self-hosted, latin subset, woff2 only — ~165KB total)
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/playfair-display-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/playfair-display-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/playfair-display-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../assets/fonts/playfair-display-latin-500-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------
   Document
   ------------------------------------------------------------------ */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--purple-200); color: var(--purple-950); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Skip-to-content: invisible until keyboard-focused */
.skip-link {
  position: absolute; left: var(--space-3); top: var(--space-3);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--indigo-800); color: var(--white);
  border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 600; font-size: var(--text-sm);
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

/* ------------------------------------------------------------------
   Headings — Playfair carries the voice
   ------------------------------------------------------------------ */
h1, h2, h3, .h-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-heading);
  color: var(--color-ink);
  text-wrap: balance;
}
.h-display { font-size: var(--text-display); font-weight: 700; line-height: var(--leading-display); letter-spacing: -.01em; }
h1 { font-size: var(--text-h1); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-family: var(--font-body); font-size: var(--text-h4); font-weight: 600; color: var(--color-ink); line-height: 1.35; }

/* One emphasised phrase per headline: gradient ink */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Editorial alternative: italic serif accent */
.accent-italic { font-style: italic; font-weight: 500; color: var(--color-accent); }

p + p { margin-top: var(--space-4); }

a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--purple-800); }

strong { color: var(--color-ink); font-weight: 600; }

/* ------------------------------------------------------------------
   Core text utilities
   ------------------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}
.eyebrow::before {
  content: "";
  width: .8em; height: .8em;
  background: var(--spark) center / contain no-repeat;
}

.lead { font-size: var(--text-lead); line-height: 1.55; color: var(--gray-600); text-wrap: pretty; }
.text-sm { font-size: var(--text-sm); }
.text-muted { color: var(--color-muted); }

/* Spark bullet list */
.spark-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.spark-list li { padding-left: 1.75rem; position: relative; }
.spark-list li::before {
  content: "";
  position: absolute; left: 0; top: .3em;
  width: .9em; height: .9em;
  background: var(--spark) center / contain no-repeat;
}

/* ------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------ */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--section-y); }
.section--soft { background: var(--color-bg-soft); }
.section--tint { background: var(--color-bg-tint); }
.section--deep {
  background: var(--grad-brand-deep);
  color: var(--color-body-inverse);
}
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4,
.section--deep .h-display { color: var(--color-ink-inverse); }
.section--deep .eyebrow { color: var(--purple-300); }
.section--deep .eyebrow::before { background-image: var(--spark-white); }
.section--deep .lead { color: var(--color-body-inverse); }

/* Spark divider between quiet sections */
.divider-spark {
  border: 0;
  display: flex; align-items: center; gap: var(--space-4);
  margin-block: 0;
}
.divider-spark::before, .divider-spark::after {
  content: ""; flex: 1; height: 1px; background: var(--color-line);
}
.divider-spark { background: none; }
.divider-spark span {
  width: 1rem; height: 1rem;
  background: var(--spark) center / contain no-repeat;
  opacity: .7;
}

/* Responsive embed (video / social) */
.embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--gray-100); box-shadow: var(--shadow-md); }
.embed > iframe, .embed > video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }