/* ════════════════════════════════════════════════════════════════
   ATOMIC DESIGN PATTERNS
   Shared atoms and molecules used across multiple organisms.
   Every atom references tokens.css — no hardcoded values.

   Atoms:     Smallest indivisible UI pieces
   Molecules: Composed from atoms
════════════════════════════════════════════════════════════════ */


/* ─── ATOM: Eyebrow Label ─────────────────────────────────────
   Usage: Section headers across hero, features, globe, team,
          faq, roadmap, map, blog, feature-detail.
   Pattern: Gold uppercase label with optional decorative lines.
─────────────────────────────────────────────────────────────── */

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  font-family: var(--font-caption);
  font-size: var(--body-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: var(--space-6);
}

/* Decorative side lines (opt-in via .eyebrow--lines) */
.eyebrow--lines::before,
.eyebrow--lines::after {
  content: '';
  width: var(--space-9);
  height: 1px;
  background: var(--brand-gold);
  opacity: 0.35;
  flex-shrink: 0;
}

/* Single leading line (opt-in via .eyebrow--lead) */
.eyebrow--lead::before {
  content: '';
  width: var(--space-6);
  height: 1px;
  background: var(--brand-gold);
  opacity: 0.35;
  flex-shrink: 0;
}


/* ─── ATOM: Display Heading ───────────────────────────────────
   Usage: Section headings (team, faq, map, features, blog).
   Pattern: Caudex bold, tight tracking, tight line-height.
─────────────────────────────────────────────────────────────── */

.heading-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: var(--text-primary);
}

/* Size variants (use alongside .heading-display) */
.heading-display--2xl { font-size: var(--heading-2xl); }
.heading-display--xl  { font-size: var(--heading-xl); }
.heading-display--lg  { font-size: var(--heading-lg); }
.heading-display--md  { font-size: var(--heading-md); }
.heading-display--sm  { font-size: var(--heading-sm); }
.heading-display--xs  { font-size: var(--heading-xs); }


/* ─── ATOM: Body Text ─────────────────────────────────────────
   Usage: Descriptions, paragraphs, body copy.
   Pattern: Inter Display, generous line-height.
─────────────────────────────────────────────────────────────── */

.body-text {
  font-family: var(--font-sans);
  color: var(--text-secondary);
  line-height: 1.7;
}

.body-text--md {
  font-size: var(--body-md);
  font-weight: 400;
}

.body-text--sm {
  font-size: var(--body-sm);
  font-weight: 500;
}

.body-text--xs {
  font-size: var(--body-xs);
  font-weight: 700;
}


/* ─── ATOM: Uppercase Label ───────────────────────────────────
   Usage: Footer column titles, carousel progress labels,
          collection numbers, small categorical labels.
   Pattern: All-caps, wide tracking, small text.
─────────────────────────────────────────────────────────────── */

.label-upper {
  font-family: var(--font-caption);
  font-size: var(--body-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ─── ATOM: Pill / Badge ──────────────────────────────────────
   Usage: Team role pills, news category tags.
   Pattern: Full-radius, uppercase, tiny text.
─────────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-family: var(--font-caption);
  font-size: var(--body-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}

/* Role variants */
.pill--founder {
  color: var(--pill-founder-text);
  background: rgba(201, 160, 72, 0.12);
  border: 1px solid rgba(201, 160, 72, 0.20);
}
.pill--developer {
  color: var(--pill-developer-text);
  background: rgba(43, 127, 255, 0.10);
  border: 1px solid rgba(43, 127, 255, 0.18);
}
.pill--creative {
  color: var(--pill-creative-text);
  background: rgba(142, 81, 255, 0.10);
  border: 1px solid rgba(142, 81, 255, 0.18);
}
.pill--helper {
  color: var(--pill-helper-text);
  background: rgba(0, 201, 80, 0.10);
  border: 1px solid rgba(0, 201, 80, 0.18);
}

/* Flat tag variant (news categories) */
.pill--flat {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  border: none;
  font-size: var(--body-xs);
}


/* ─── ATOM: Avatar ────────────────────────────────────────────
   Usage: Author rows in news cards, post detail, team cards.
   Pattern: Circle image/initials with size variants.
─────────────────────────────────────────────────────────────── */

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-floating);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-weight: 700;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Size variants */
.avatar--xs {
  width: var(--space-8);   /* 24px */
  height: var(--space-8);
  font-size: var(--body-xs);
}

.avatar--sm {
  width: 30px;
  height: 30px;
  font-size: var(--body-xs);
}

.avatar--md {
  width: 42px;
  height: 42px;
  font-size: var(--body-md);
}

.avatar--lg {
  width: var(--space-18);  /* 80px */
  height: var(--space-18);
  font-size: var(--heading-sm);
}


/* ─── MOLECULE: Section Header ────────────────────────────────
   Usage: Team, FAQ, Features, Map — eyebrow + heading + desc.
   Pattern: Centered column layout with stacked content.
─────────────────────────────────────────────────────────────── */

.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-header .eyebrow {
  margin-bottom: var(--space-6);
}

.section-header .heading-display {
  margin-bottom: var(--space-5);
}

.section-header .body-text {
  max-width: 520px;
}


/* ─── MOLECULE: Author Row ────────────────────────────────────
   Usage: News card footers, post detail author blocks.
   Pattern: Avatar + name + role, horizontally stacked.
─────────────────────────────────────────────────────────────── */

.author-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.author-row__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.author-row__name {
  font-family: var(--font-sans);
  font-size: var(--body-xs);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  line-height: 1;
}

.author-row__role {
  font-family: var(--font-caption);
  font-size: var(--body-xs);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  line-height: 1;
}


/* ─── MOLECULE: Card Surface ──────────────────────────────────
   Usage: News cards, team cards, any elevated card element.
   Pattern: Elevated surface with subtle border and layered shadow.
─────────────────────────────────────────────────────────────── */

.card-surface {
  background: var(--color-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card-surface--floating {
  background: var(--color-floating);
}