/* ==========================================================================
   BENTO GRID SLEEK MATTE DARK DESIGN SYSTEM (DESIGN.MD)
   Target: Syed Ubada Portfolio Ecosystem (All 11 Pages)
   Constraint: Sleek Matte Tones, ZERO Neon, ZERO Radium, Pure Dark Substrate
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700;800&family=Space+Grotesk:wght@500;700;800;900&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* Substrate & Base Canvas */
  --bg-canvas: #000000;
  --bg-surface: #0b0d14;
  --bg-surface-elevated: #121420;
  --bg-subtle: #181a28;

  /* High-Contrast Hairlines & Boundaries */
  --border-hairline: rgba(255, 255, 255, 0.14);
  --border-hairline-bright: rgba(255, 255, 255, 0.28);
  --border-contrast: #ffffff;

  /* Sleek Matte Accents (Zero Neon / Zero Radium) */
  --accent-blue: #3b82f6;
  --accent-orange: #f97316;
  --accent-purple: #8b5cf6;
  --accent-cyan: #38bdf8;
  --accent-slate: #94a3b8;
  --accent-white: #ffffff;

  /* Typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-sans: 'Plus Jakarta Sans', sans-serif;

  /* Sleek Matte Shadow */
  --shadow-matte: 0 10px 30px rgba(0, 0, 0, 0.7);
}

body {
  background-color: var(--bg-canvas) !important;
  font-family: var(--font-sans);
  color: #ffffff !important;
}

/* Typography Helpers */
.font-mono-acid { font-family: var(--font-mono); }
.font-display-acid { font-family: var(--font-display); }

/* Multi-Chroma Text Utilities */
.text-acid-blue { color: var(--accent-blue) !important; }
.text-acid-cyan { color: var(--accent-cyan) !important; }
.text-acid-orange { color: var(--accent-orange) !important; }
.text-acid-purple { color: var(--accent-purple) !important; }
.text-acid-lavender { color: #c084fc !important; }

/* Bento Container Upgrades */
.bento-shell {
  background-color: #07080d !important;
  border: 1px solid var(--border-hairline-bright) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95);
}

.bento-node-tile {
  background-color: #0d0f17 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-node-tile:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-2px);
}

/* Matte Bento Card Containers */
.bento-card-blue {
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
  color: #ffffff !important;
}

.bento-card-orange {
  background: linear-gradient(145deg, #451a03 0%, #1c1917 100%) !important;
  border: 1px solid rgba(249, 115, 22, 0.3) !important;
  color: #ffffff !important;
}

.bento-card-purple {
  background: linear-gradient(145deg, #2e1065 0%, #0f172a 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.3) !important;
  color: #ffffff !important;
}

.bento-card-cyan {
  background: linear-gradient(145deg, #0c4a6e 0%, #082f49 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.3) !important;
  color: #ffffff !important;
}

.bento-card-obsidian {
  background-color: #090a0e !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

.bento-card-obsidian:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Cluster Asymmetrical Accents (Matte) */
.bento-cluster-01 {
  background: linear-gradient(145deg, #0f172a 0%, #0284c7 20%, #0f172a 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

.bento-cluster-02 {
  background: linear-gradient(145deg, #1e1b4b 0%, #4338ca 20%, #1e1b4b 100%) !important;
  border: 1px solid rgba(139, 92, 246, 0.25) !important;
}

.bento-cluster-03 {
  background: linear-gradient(145deg, #31121d 0%, #831843 20%, #31121d 100%) !important;
  border: 1px solid rgba(244, 114, 182, 0.25) !important;
}

.bento-cluster-04 {
  background: linear-gradient(145deg, #2a1208 0%, #7c2d12 20%, #2a1208 100%) !important;
  border: 1px solid rgba(249, 115, 22, 0.25) !important;
}

.bento-cluster-05 {
  background: linear-gradient(145deg, #0f172a 0%, #1e3a8a 20%, #0f172a 100%) !important;
  border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

.bento-cluster-06 {
  background: linear-gradient(145deg, #1c1917 0%, #451a03 20%, #1c1917 100%) !important;
  border: 1px solid rgba(251, 146, 60, 0.25) !important;
}

/* Detailed Inner Platform Cards */
.bento-card-inner {
  background-color: rgba(11, 13, 20, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: all 0.18s ease-out;
}

.bento-card-inner:hover {
  background-color: rgba(22, 25, 38, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* Matte Pixel Badge Pills */
.bento-badge-blue {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 9999px;
  padding: 0.2rem 0.6rem;
  font-size: 10px;
  font-weight: 700;
  background-color: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.bento-badge-cyan {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 9999px;
  padding: 0.2rem 0.6rem;
  font-size: 10px;
  font-weight: 700;
  background-color: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.4);
}

.bento-badge-orange {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 9999px;
  padding: 0.2rem 0.6rem;
  font-size: 10px;
  font-weight: 700;
  background-color: rgba(249, 115, 22, 0.15);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.4);
}