/* ============================================================
   Lumina Shared Components
   Buttons, badges, pill eyebrows, cards
   ============================================================ */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}

/* --- Utility classes --- */
.display { font-family: var(--font-display); font-weight: 300; letter-spacing: -0.02em; }
.mono { font-family: var(--font-mono); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 18px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}
.btn-primary { border-color: var(--blue-primary); color: var(--blue-primary); }
.btn-primary:hover { background: var(--blue-mist); }
.btn-secondary { border-color: var(--border); color: var(--ink); }
.btn-secondary:hover { border-color: var(--blue-primary); color: var(--blue-primary); }
.btn-ghost { border-color: var(--border); color: var(--ink); }
.btn-dark { border-color: rgba(255,255,255,0.7); color: #fff; }
.btn-dark:hover { background: rgba(255,255,255,0.08); }
.btn-tertiary { border: none; color: var(--ink-2); padding: 10px 6px; }
.btn-tertiary:hover { color: var(--ink); }

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.badge-primary { background: var(--blue-mist); color: #1E4D7E; }
.badge-success { background: rgba(45,159,111,0.12); color: var(--success); }

/* --- Pill eyebrow (section markers) --- */
.pill-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: rgba(26,29,36,0.06);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.pill-eyebrow .sq {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--blue-primary);
}

/* --- Section rhythm backgrounds --- */
.bg-paper-blue { background: var(--blue-paper); color: var(--ink); }
.bg-sky { background: var(--blue-sky); color: var(--ink); }
.bg-navy { background: var(--blue-deep); color: #EEF0F5; }
.bg-ink { background: var(--blue-ink); color: #EEF0F5; }
.bg-white { background: #FFFFFF; color: var(--ink); }

/* --- Eyebrow (mono label with dash) --- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
}

/* --- Dark mode visibility utilities --- */
.dark-hidden { display: inline; }
.dark-visible { display: none; }
html.dark .dark-hidden { display: none; }
html.dark .dark-visible { display: inline; }
img.dark-hidden { display: block; }
img.dark-visible { display: none; }
html.dark img.dark-hidden { display: none; }
html.dark img.dark-visible { display: block; }
html.dark .dark-invert-icon { filter: invert(1); }
html.dark .dark-invert { filter: brightness(0) saturate(0) invert(1); }

/* --- Dark mode component overrides --- */
html.dark .bg-paper-blue { background: var(--surface); }
html.dark .bg-white { background: var(--surface-container); }
html.dark .bg-sky { background: var(--blue-sky); }
html.dark .pill-eyebrow { background: rgba(238,240,245,0.08); color: var(--ink); }
html.dark .badge-primary { background: var(--blue-mist); color: var(--blue-primary); }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}