/* ============================================
   shared.css — Solo.yun Shared Styles
   ============================================ */

/* ---- Material Symbols Icon Base ---- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* ---- Body Base ---- */
body {
  background-color: #F8FAFC;
  font-family: 'Inter', sans-serif;
}

/* ---- Dark Mode ---- */
.dark body {
  background-color: #131b2e;
}
.dark .bg-surface { background-color: #131b2e; }
.dark .bg-surface-container-lowest,
.dark .bg-white { background-color: #1a2540; }
.dark .bg-surface-container { background-color: #1e2a48; }
.dark .bg-surface-alt { background-color: #162038; }
.dark .bg-tertiary-container { background-color: #0f1628; }
.dark .border-border-subtle { border-color: rgba(255,255,255,0.08); }
.dark .text-on-surface { color: #dae2fd; }
.dark .text-on-surface-variant { color: #7c839b; }
.dark .text-on-tertiary-container { color: #5a6785; }
.dark .bg-secondary-container { background-color: #004d45; }
.dark .text-on-secondary-container { color: #86f2e4; }
.dark .bg-outline-variant { background-color: rgba(255,255,255,0.15); }
.dark .bg-surface-container-high { background-color: #1e2a48; }
.dark .bg-secondary-fixed-dim { background-color: rgba(0,106,97,0.25); }
.dark .ring-white { --tw-ring-color: rgba(255,255,255,0.08); }
.dark .hover\:bg-surface-alt:hover { background-color: rgba(255,255,255,0.06); }
.dark .hover\:shadow-md:hover { box-shadow: 0px 4px 12px rgba(0,0,0,0.3); }
.dark .shadow-sm { box-shadow: 0px 1px 3px rgba(0,0,0,0.2); }
.dark .selection\:bg-secondary-container::selection { background-color: rgba(0,106,97,0.3); }

/* CTA buttons: keep hover light in dark mode */
.dark .btn-cta-light:hover { background-color: rgba(255,255,255,0.85) !important; }

/* ---- Glass Navigation ---- */
.glass-nav,
.backdrop-blur-md {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ---- Bento Card (feature grid) ---- */
.bento-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.bento-card:hover {
  transform: translateY(-2px);
  box-shadow: 0px 4px 12px rgba(15, 23, 42, 0.05);
}

/* ---- Bento Grid (12-col layout) ---- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

/* ---- Scenario Card Hover ---- */
.scenario-card:hover {
  box-shadow: 0px 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Timeline Line (changelog) ---- */
.timeline-line::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background-color: #E2E8F0;
  z-index: 0;
}
.dark .timeline-line::before { background-color: rgba(255,255,255,0.08); }
@media (max-width: 768px) {
  .timeline-line::before {
    left: 20px;
  }
}

/* ---- Step Line (scenario detail) ---- */
.step-line {
  background-image: linear-gradient(90deg, #006a61 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
}

/* ---- Heading / Label font overrides ---- */
.font-display-lg,
.font-headline-md,
.font-headline-sm,
.font-label-caps,
.font-mono-data {
  font-family: 'Geist', sans-serif;
}

/* ---- Scroll smooth ---- */
html {
  scroll-behavior: smooth;
}

/* ---- Selection ---- */
::selection {
  background-color: #86f2e4;
  color: #191c1e;
}