/* ═══════════════════════════════════════════════════════════════
   XDNAI Design System v2.0
   Generated: 2026-03-10 by Amber Posey 🌸
   Source: brand-guide.json v2.0
   
   NEO-BRUTALIST DNA INTELLIGENCE
   Zero radius. Heavy borders. Offset shadows. Bold color.
   Everything feels like you could reach out and press it.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Core Brand Colors ─── */
:root {
  /* Primary Palette */
  --xdnai-gold: #FFE600;
  --xdnai-cyan: #00FFFF;
  --xdnai-lime: #C7FF00;
  --xdnai-pink: #FF6B9D;
  --xdnai-red: #FF3333;
  --xdnai-orange: #FF9F1C;
  --xdnai-purple: #B388FF;
  --xdnai-blue: #4CC9F0;

  /* Mardi Gras / Louisiana Heritage */
  --xdnai-mardi-purple: #7B2D8E;
  --xdnai-mardi-green: #18A558;
  --xdnai-mardi-gold: #F9A825;

  /* Surfaces */
  --xdnai-bg: #FFFFFF;
  --xdnai-surface: #F5F5F5;
  --xdnai-text: #0A0A0A;
  --xdnai-text-2: #666666;
  --xdnai-border: #000000;

  /* Status */
  --xdnai-success: #22C55E;
  --xdnai-warning: #F59E0B;
  --xdnai-error: #EF4444;

  /* Typography */
  --xdnai-font-display: 'Space Grotesk', system-ui, sans-serif;
  --xdnai-font-body: 'Space Grotesk', system-ui, sans-serif;
  --xdnai-font-mono: 'JetBrains Mono', monospace;

  /* Type Scale (fluid) */
  --xdnai-display: clamp(3rem, 5vw, 5rem);
  --xdnai-h1: clamp(2.25rem, 4vw, 3.5rem);
  --xdnai-h2: clamp(1.75rem, 3vw, 2.5rem);
  --xdnai-h3: clamp(1.25rem, 2vw, 1.75rem);
  --xdnai-h4: 1.125rem;
  --xdnai-body: 1rem;
  --xdnai-body-sm: 0.875rem;
  --xdnai-label: 0.75rem;
  --xdnai-micro: 0.625rem;

  /* Spacing */
  --xdnai-unit: 8px;
  --xdnai-section-pad: clamp(48px, 8vw, 96px);
  --xdnai-card-pad: 24px;
  --xdnai-radius: 0px;  /* ZERO. Always. */

  /* Borders & Shadows */
  --xdnai-border-w: 3px;
  --xdnai-shadow: 4px 4px 0 #000000;
  --xdnai-shadow-sm: 2px 2px 0 #000000;
  --xdnai-shadow-lg: 6px 6px 0 #000000;
  --xdnai-hover-offset: 2px;

  /* Gene Category Colors */
  --xdnai-gene-drug: #B388FF;
  --xdnai-gene-methyl: #4CC9F0;
  --xdnai-gene-neuro: #FF6B9D;
  --xdnai-gene-cardio: #FF3333;
  --xdnai-gene-nutrition: #C7FF00;
  --xdnai-gene-fitness: #FF9F1C;
  --xdnai-gene-caffeine: #FFE600;
  --xdnai-gene-sleep: #00FFFF;
  --xdnai-gene-cancer: #FF3333;
  --xdnai-gene-cognitive: #4CC9F0;
}

/* ─── Dark Mode ─── */
.dark {
  --xdnai-bg: #0A0A0A;
  --xdnai-surface: #1A1A1A;
  --xdnai-text: #F5F5F5;
  --xdnai-text-2: #999999;
  --xdnai-border: #333333;
  --xdnai-shadow: 4px 4px 0 rgba(255,255,255,0.15);
  --xdnai-shadow-sm: 2px 2px 0 rgba(255,255,255,0.15);
  --xdnai-shadow-lg: 6px 6px 0 rgba(255,255,255,0.15);
}

/* ═══════════════════════════════════════════
   BASE ELEMENTS
   ═══════════════════════════════════════════ */

.xd-body {
  font-family: var(--xdnai-font-body);
  font-size: var(--xdnai-body);
  line-height: 1.6;
  color: var(--xdnai-text);
  background-color: var(--xdnai-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════ */

.xd-display {
  font-family: var(--xdnai-font-display);
  font-size: var(--xdnai-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-transform: uppercase;
}

.xd-h1 {
  font-family: var(--xdnai-font-display);
  font-size: var(--xdnai-h1);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
}

.xd-h2 {
  font-family: var(--xdnai-font-display);
  font-size: var(--xdnai-h2);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  text-transform: uppercase;
}

.xd-h3 {
  font-family: var(--xdnai-font-display);
  font-size: var(--xdnai-h3);
  font-weight: 700;
  text-transform: uppercase;
}

.xd-h4 {
  font-family: var(--xdnai-font-display);
  font-size: var(--xdnai-h4);
  font-weight: 700;
  text-transform: uppercase;
}

.xd-body { font-size: var(--xdnai-body); }
.xd-body-sm { font-size: var(--xdnai-body-sm); }
.xd-label {
  font-size: var(--xdnai-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.xd-micro {
  font-size: var(--xdnai-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.xd-mono {
  font-family: var(--xdnai-font-mono);
  font-size: 0.9em;
}

/* ═══════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════ */

/* ── Card ── */
.xd-card {
  border: var(--xdnai-border-w) solid var(--xdnai-border);
  background: var(--xdnai-bg);
  color: var(--xdnai-text);
  box-shadow: var(--xdnai-shadow);
  padding: var(--xdnai-card-pad);
  border-radius: var(--xdnai-radius);
}

.xd-card-sm {
  box-shadow: var(--xdnai-shadow-sm);
  padding: calc(var(--xdnai-card-pad) * 0.75);
}

.xd-card-interactive {
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.xd-card-interactive:hover {
  transform: translate(var(--xdnai-hover-offset), var(--xdnai-hover-offset));
  box-shadow: none;
}

/* ── Button ── */
.xd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: var(--xdnai-border-w) solid var(--xdnai-border);
  padding: 12px 24px;
  font-family: var(--xdnai-font-display);
  font-weight: 900;
  font-size: var(--xdnai-body-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--xdnai-shadow);
  border-radius: var(--xdnai-radius);
  transition: transform 120ms ease, box-shadow 120ms ease;
  text-decoration: none;
}
.xd-btn:hover {
  transform: translate(var(--xdnai-hover-offset), var(--xdnai-hover-offset));
  box-shadow: none;
}
.xd-btn:active {
  transform: translate(3px, 3px);
}

/* Button Variants */
.xd-btn-primary {
  background: var(--xdnai-gold);
  color: #000000;
}
.xd-btn-secondary {
  background: var(--xdnai-bg);
  color: var(--xdnai-text);
}
.xd-btn-dark {
  background: #000000;
  color: #FFFFFF;
}
.xd-btn-danger {
  background: var(--xdnai-red);
  color: #FFFFFF;
}
.xd-btn-success {
  background: var(--xdnai-lime);
  color: #000000;
}
.xd-btn-pro {
  background: var(--xdnai-purple);
  color: #FFFFFF;
}

/* Button Sizes */
.xd-btn-lg {
  padding: 16px 32px;
  font-size: var(--xdnai-body);
}
.xd-btn-sm {
  padding: 8px 16px;
  font-size: var(--xdnai-label);
  box-shadow: var(--xdnai-shadow-sm);
}

/* ── Badge ── */
.xd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 2px solid var(--xdnai-border);
  padding: 2px 10px;
  font-family: var(--xdnai-font-display);
  font-weight: 900;
  font-size: var(--xdnai-label);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: var(--xdnai-radius);
}

.xd-badge-gold { background: var(--xdnai-gold); color: #000; }
.xd-badge-cyan { background: var(--xdnai-cyan); color: #000; }
.xd-badge-lime { background: var(--xdnai-lime); color: #000; }
.xd-badge-pink { background: var(--xdnai-pink); color: #000; }
.xd-badge-red { background: var(--xdnai-red); color: #fff; }
.xd-badge-orange { background: var(--xdnai-orange); color: #000; }
.xd-badge-purple { background: var(--xdnai-purple); color: #fff; }
.xd-badge-blue { background: var(--xdnai-blue); color: #000; }
.xd-badge-dark { background: #000; color: #fff; }

/* ── Section ── */
.xd-section {
  padding: var(--xdnai-section-pad) 0;
}

.xd-section-label {
  display: inline-block;
  background: #000000;
  color: #FFFFFF;
  padding: 4px 12px;
  font-family: var(--xdnai-font-display);
  font-weight: 900;
  font-size: var(--xdnai-label);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

/* ── Stats Bar ── */
.xd-stats-bar {
  display: grid;
  border: var(--xdnai-border-w) solid var(--xdnai-border);
  background: #000000;
  color: #FFFFFF;
}
.xd-stat {
  padding: 24px;
  text-align: center;
  border-right: 2px solid rgba(255,255,255,0.2);
}
.xd-stat:last-child { border-right: none; }
.xd-stat-value {
  font-family: var(--xdnai-font-display);
  font-size: var(--xdnai-h2);
  font-weight: 900;
}
.xd-stat-label {
  font-size: var(--xdnai-label);
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 4px;
}

/* ── Gene Badge (special) ── */
.xd-gene-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--xdnai-border);
  padding: 4px 12px;
  font-family: var(--xdnai-font-mono);
  font-size: var(--xdnai-body-sm);
  font-weight: 600;
}
.xd-gene-badge-category {
  font-family: var(--xdnai-font-display);
  font-size: var(--xdnai-micro);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* ── Alert / Finding ── */
.xd-finding {
  border-left: 4px solid;
  padding: 12px 16px;
  font-size: var(--xdnai-body-sm);
  margin-bottom: 8px;
}
.xd-finding-critical { border-color: var(--xdnai-red); background: rgba(255,51,51,0.05); }
.xd-finding-warning { border-color: var(--xdnai-orange); background: rgba(255,159,28,0.05); }
.xd-finding-info { border-color: var(--xdnai-cyan); background: rgba(0,255,255,0.05); }
.xd-finding-good { border-color: var(--xdnai-lime); background: rgba(199,255,0,0.05); }

/* ── Navigation ── */
.xd-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: var(--xdnai-border-w) solid var(--xdnai-border);
  background: var(--xdnai-bg);
  height: 56px;
}

.xd-nav-logo {
  font-family: var(--xdnai-font-display);
  font-weight: 900;
  font-size: var(--xdnai-h4);
  letter-spacing: -0.02em;
  background: var(--xdnai-gold);
  color: #000;
  padding: 4px 10px;
  border: 2px solid #000;
  box-shadow: var(--xdnai-shadow-sm);
  text-decoration: none;
}
.xd-nav-logo:hover {
  transform: translate(1px, 1px);
  box-shadow: none;
}

/* ── Footer ── */
.xd-footer {
  border-top: var(--xdnai-border-w) solid var(--xdnai-border);
  padding: 48px 0 24px;
}

/* ═══════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════ */

.xd-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 640px) { .xd-container { padding: 0 24px; } }
@media (min-width: 1024px) { .xd-container { padding: 0 32px; } }

.xd-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.xd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.xd-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 768px) {
  .xd-grid-2, .xd-grid-3, .xd-grid-4 {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .xd-grid-3, .xd-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Color Backgrounds */
.xd-bg-gold { background: var(--xdnai-gold); color: #000; }
.xd-bg-cyan { background: var(--xdnai-cyan); color: #000; }
.xd-bg-lime { background: var(--xdnai-lime); color: #000; }
.xd-bg-pink { background: var(--xdnai-pink); color: #000; }
.xd-bg-red { background: var(--xdnai-red); color: #fff; }
.xd-bg-orange { background: var(--xdnai-orange); color: #000; }
.xd-bg-purple { background: var(--xdnai-purple); color: #fff; }
.xd-bg-blue { background: var(--xdnai-blue); color: #000; }
.xd-bg-dark { background: #000; color: #fff; }
.xd-bg-surface { background: var(--xdnai-surface); }

/* Text Colors */
.xd-text-muted { color: var(--xdnai-text-2); }
.xd-text-gold { color: var(--xdnai-gold); }
.xd-text-cyan { color: var(--xdnai-cyan); }
.xd-text-red { color: var(--xdnai-red); }
.xd-text-lime { color: var(--xdnai-lime); }

/* Border Utilities */
.xd-border { border: var(--xdnai-border-w) solid var(--xdnai-border); }
.xd-border-b { border-bottom: var(--xdnai-border-w) solid var(--xdnai-border); }
.xd-border-t { border-top: var(--xdnai-border-w) solid var(--xdnai-border); }

/* ═══════════════════════════════════════════
   ANIMATIONS (Level 2 — Moderate)
   ═══════════════════════════════════════════ */

/* Fade-in on scroll (use with IntersectionObserver) */
.xd-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.xd-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.xd-stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* Pulse for attention */
@keyframes xd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.xd-pulse { animation: xd-pulse 2s ease-in-out infinite; }

/* Skeleton loading */
@keyframes xd-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.xd-skeleton {
  background: linear-gradient(90deg, var(--xdnai-surface) 25%, #e0e0e0 50%, var(--xdnai-surface) 75%);
  background-size: 200% 100%;
  animation: xd-shimmer 1.5s infinite;
}