/* X to the Y — wrapped-module skin (BUILD #6). Injected via <link> AFTER each app's own CSS so it
   wins on the cascade. Goal: each wrapped Replit/Vite/Tailwind app "reads as one product" inside the
   X2Y frame — WITHOUT breaking it. Hard lesson from Wave 1: remapping surface/primary colors floods
   primary-as-hero apps and breaks dark-themed apps (white text on a forced-light bg). So this skin is
   deliberately MINIMAL + universally safe: unify TYPOGRAPHY (Fraunces + Inter) and confine kintsugi
   gold to interactive accents (links + buttons). Each app keeps its own light/dark theme + colors.
   Reversible: delete this file + the injected <link>. Touches no JS/logic. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=Inter:wght@300..700&display=swap');

:root {
  --xy-gold: #c89a3c;
  --xy-gold-deep: #a9791f;
  /* v4 apps that read --default-font-family pick up Inter from here */
  --default-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Type — the dominant, theme-agnostic "one product" lever */
html { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important; }
h1, h2, h3, h4, h5, h6 { font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important; letter-spacing: -0.01em; }

/* Kintsugi gold — links + buttons ONLY (scoped to interactive elements; never hero <div>s or surfaces) */
a:not([class*="bg-"]) { color: var(--xy-gold-deep); }
a:not([class*="bg-"]):hover { color: var(--xy-gold); }
button[class*="primary"], a.btn, button.btn-primary, .btn-primary, [role="button"][class*="primary"] {
  background-color: var(--xy-gold) !important;
  border-color: var(--xy-gold) !important;
  color: #ffffff !important;
}
:focus-visible { outline-color: var(--xy-gold) !important; }