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

:root {
  --bg-ivory: #FBFBF9;
  --ink-dark: #0A0D14;
  --sirius-blue: #0047FF;
  --sirius-teal: #00A389;
}

body {
  background-color: var(--bg-ivory);
  color: var(--ink-dark);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}

.font-serif-editorial {
  font-family: 'Instrument Serif', Georgia, serif;
}

.font-mono-tech {
  font-family: 'JetBrains Mono', monospace;
}

.bg-architectural-grid {
  background-size: 48px 48px;
  background-image:
    linear-gradient(to right, rgba(10, 13, 20, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10, 13, 20, 0.04) 1px, transparent 1px);
}

.glass-header {
  background: rgba(251, 251, 249, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.bento-light {
  background: #FFFFFF;
  border: 1px solid rgba(10, 13, 20, 0.08);
  box-shadow: 0 4px 24px -6px rgba(10, 13, 20, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-light:hover {
  border-color: rgba(0, 71, 255, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -15px rgba(0, 71, 255, 0.12);
}

.bento-obsidian {
  background: linear-gradient(145deg, #0F1420 0%, #070A10 100%);
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.1);
}