/* Fanrep landing page styles.
   Tokens come from the Vidor design system used in the Claude Design draft
   (primary #8A38F5, accent #393EBA, Tailwind zinc neutrals). Layout styles
   live inline in index.html, exactly as in the design. */

/* ---------- Fonts ---------- */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/DMSans-400.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/DMSans-500.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/DMSans-600.ttf') format('truetype'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/DMSans-700.ttf') format('truetype'); }
/* Logo wordmark */
@font-face { font-family: 'Megazoid'; src: url('/fonts/Megazoid.otf') format('opentype'); font-display: block; }
@font-face { font-family: 'Megazoid Fill'; src: url('/fonts/Megazoid-Fill.otf') format('opentype'); font-display: block; }

/* ---------- Tokens ---------- */
:root {
  --zinc-50:  #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  --primary-50:  #f3effe;
  --primary-100: #e4dbfd;
  --primary-200: #cab6fc;
  --primary-300: #b291fa;
  --primary-400: #9d69f8;
  --primary-500: #8a38f5;
  --primary-600: #721ad3;
  --primary-700: #5711a4;
  --primary-800: #3d0976;
  --primary-900: #25044c;

  --accent-100: #d7d8f5;
  --accent-200: #adaeea;
  --accent-400: #6063d2;
  --accent-500: #393eba;

  --status-success: #16a34a;
  --status-warning: #f97316;
  --status-danger:  #dc2626;

  --fg-1: var(--zinc-950);
  --fg-2: var(--zinc-600);
  --fg-link: var(--primary-600);
  --bg-app: #ffffff;
  --border-default: rgb(9 9 11 / 0.10);

  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-high: 0 0 2px 0 rgba(0, 0, 0, 0.10), 0 16px 24px 0 rgba(0, 0, 0, 0.10);

  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ts-h1:   700 30px/1.2 var(--font-sans);
  --ts-h2:   600 20px/1.3 var(--font-sans);
  --ts-h3:   600 18px/1.4 var(--font-sans);
  --ts-body: 400 16px/1.55 var(--font-sans);
}

/* ---------- Base (design system element defaults) ---------- */
html, body { background: var(--bg-app); color: var(--fg-1); font: var(--ts-body); }
h1 { font: var(--ts-h1); color: var(--fg-1); letter-spacing: -0.01em; }
h2 { font: var(--ts-h2); color: var(--fg-1); }
h3 { font: var(--ts-h3); color: var(--fg-1); }
p  { font: var(--ts-body); color: var(--fg-2); }
a  { color: var(--fg-link); text-decoration: none; }
*:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }

/* ---------- Page ---------- */
html { overflow-x: hidden; scroll-behavior: smooth; }
body { margin: 0; background: #fff; color: var(--zinc-950); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--primary-600); }
a:hover { color: var(--primary-500); }
input::placeholder { color: var(--zinc-400) !important; }
[hidden] { display: none !important; }

@keyframes frSpin { to { transform: rotate(360deg); } }
@keyframes frFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes frPop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes frBadge { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }

/* ---------- Hover / focus states ----------
   The base look of each element is set inline; these classes only add the
   design's hover and focus states, so they use !important to win over the
   inline values. */
.hv-ink:hover { color: var(--zinc-950) !important; }
.hv-primary-text:hover { color: var(--primary-700) !important; }
.hv-primary-bg:hover { background: var(--primary-700) !important; }
.hv-dark-bg:hover { background: var(--zinc-800) !important; color: #fff !important; }
.hv-primary-light-bg:hover { background: var(--primary-500) !important; color: #fff !important; }
.hv-ghost:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.hv-card:hover { border-color: var(--zinc-300) !important; background: var(--zinc-50) !important; }
.hv-slot:hover { border-color: var(--primary-500) !important; }
.fc-field:focus { border-color: var(--primary-500) !important; box-shadow: 0 0 0 2px rgba(138,56,245,.25) !important; }

/* ---------- Small screens ----------
   Not in the design: at phone widths the header links don't fit next to the
   logo, so the in-page links (also in the footer) are hidden. */
@media (max-width: 560px) {
  .nav-optional { display: none !important; }
}