/* =============================
   INFINIOX CORE STYLESHEET
   Doctrine-driven UI System
============================= */

:root {
  --void: #050505;
  --ash: #a1a1aa;
  --fog: #71717a;
  --white: #ffffff;
  --gold: #d4af37;
  --cyan: #00f3ff;
  --violet: #a855f7;
  --crimson: #dc2626;
}

/* RESET & BASE */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--void);
  color: var(--ash);
  font-family: 'Rajdhani', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* TYPOGRAPHY SYSTEM */
.font-cyber {
  font-family: 'Orbitron', sans-serif;
}

.font-grand {
  font-family: 'Syncopate', sans-serif;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

h1, h2, h3, h4 {
  color: var(--white);
}

/* NOISE OVERLAY */
.noise {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* LINKS */
a {
  color: var(--white);
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}

a:hover {
  opacity: 0.8;
}

/* SYSTEM OVERLAY */
#systemOverlay a {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
}

#systemOverlay a:hover {
  color: var(--gold);
}

/* COLLECTION CARDS */
.collection-card {
  position: relative;
  height: 360px;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.25em;
  font-size: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.4));
  transition: all 0.4s ease;
}

.collection-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.collection-card:hover::before {
  opacity: 1;
}

.collection-card:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
}

/* FOOTER */
footer {
  background: #000;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .collection-card {
    height: 260px;
    font-size: 1.2rem;
  }
}