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

/* Design Tokens on Orbit's Paper-and-Ink system */
:root {
  /* Color Palette (Light Mode by default) */
  --surface-rgb: 255 255 255;
  --surface-2-rgb: 249 250 251;
  --line-rgb: 229 231 235;
  --line-soft-rgb: 243 244 246;
  --ink-rgb: 17 24 39;
  --ink-soft-rgb: 75 85 99;
  --muted-rgb: 107 114 128;
  --faint-rgb: 156 163 175;
  --accent-rgb: 26 115 232;
  --accent-soft-rgb: 232 240 254;
  --accent-ink-rgb: 26 115 232;
  
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  
  /* Primary blue accents */
  --blue-primary: #1a73e8;
  --blue-hover: #1557b0;
  --blue-bright: #3279F9;
  --headline-gradient: linear-gradient(115deg, #1a73e8 0%, #3279F9 45%, #4C94FF 100%);
}

:root.dark {
  /* Color Palette (Dark Mode) */
  --surface-rgb: 11 13 16;
  --surface-2-rgb: 20 23 27;
  --line-rgb: 43 49 57;
  --line-soft-rgb: 28 32 38;
  --ink-rgb: 246 246 244;
  --ink-soft-rgb: 209 213 219;
  --muted-rgb: 156 163 175;
  --faint-rgb: 107 114 128;
  --accent-rgb: 50 121 249;
  --accent-soft-rgb: 26 35 54;
  --accent-ink-rgb: 138 180 248;
  
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
  
  /* Under dark mode, headlines gain a glowing accent */
  --headline-gradient: linear-gradient(115deg, #8AB4F8 0%, #3279F9 50%, #4C94FF 100%);
}

/* Global resets and typography */
html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

body {
  background-color: rgb(var(--surface-rgb));
  color: rgb(var(--ink-rgb));
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  position: relative;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgb(var(--surface-2-rgb));
}
::-webkit-scrollbar-thumb {
  background: rgb(var(--line-rgb));
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--faint-rgb));
}

/* Typographic defaults mapping */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}

.font-mono-tag {
  font-family: var(--font-mono);
}

/* Base custom classes to support Landing.jsx themes */
.border-theme {
  border-color: rgb(var(--line-rgb));
}
.border-theme-soft {
  border-color: rgb(var(--line-soft-rgb));
}

.text-ink {
  color: rgb(var(--ink-rgb));
}
.text-ink-soft {
  color: rgb(var(--ink-soft-rgb));
}
.text-muted {
  color: rgb(var(--muted-rgb));
}
.text-faint {
  color: rgb(var(--faint-rgb));
}

.bg-surface {
  background-color: rgb(var(--surface-rgb));
}
.bg-surface-2 {
  background-color: rgb(var(--surface-2-rgb));
}

/* Custom chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  background-color: rgb(var(--surface-rgb));
  border: 1px solid rgb(var(--line-rgb));
  color: rgb(var(--ink-soft-rgb));
  box-shadow: var(--shadow-xs);
}

.chip-warning {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  background-color: #fffbeb;
  border: 1px solid #fef3c7;
  color: #b45309;
}
.dark .chip-warning {
  background-color: #78350f;
  border-color: #92400e;
  color: #fef3c7;
}

.chip-success {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  background-color: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #047857;
}
.dark .chip-success {
  background-color: #064e3b;
  border-color: #065f46;
  color: #d1fae5;
}

.chip-neutral {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  background-color: rgb(var(--surface-2-rgb));
  border: 1px solid rgb(var(--line-rgb));
  color: rgb(var(--ink-soft-rgb));
}

/* Pill component styles */
.lp-blue-pill {
  background-color: var(--blue-primary);
  color: #fff !important;
  box-shadow: 0 10px 26px -12px rgba(26, 115, 232, 0.65);
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lp-blue-pill:hover {
  background-color: var(--blue-hover);
  box-shadow: 0 14px 30px -12px rgba(26, 115, 232, 0.55);
}

.lp-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.lp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Animations mapping */
@keyframes lp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

/* Drifting particles backing */
canvas {
  display: block;
}

/* Floating animation loops */
.animate-float {
  animation: float-drift var(--float-duration, 6s) ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
}

@keyframes float-drift {
  0% { transform: translateY(0px) rotate(var(--float-rot, 0deg)); }
  50% { transform: translateY(var(--float-dy, -10px)) rotate(var(--float-rot, 0deg)); }
  100% { transform: translateY(0px) rotate(var(--float-rot, 0deg)); }
}

/* Scroll reveal system definitions */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-hero-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal-hero-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Dot grid overlay styling */
.dot-grid {
  background-image: radial-gradient(rgb(var(--line-rgb)) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Aurora decorative gradient divider */
.aurora-bar {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--line-rgb)) 20%, rgb(var(--line-rgb)) 80%, transparent);
}

/* Interactive simulation classes */
.deals-column {
  min-height: 100px;
}
.deal-card {
  cursor: grab;
}
.deal-card:active {
  cursor: grabbing;
}

/* Styling native detail summaries to rotate plus signs */
details summary::-webkit-details-marker {
  display: none;
}
details summary {
  list-style: none;
}

/* Hide Google Translate toolbar and header banner */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt {
  display: none !important;
}
body {
  top: 0 !important;
}
.goog-te-balloon-frame {
  display: none !important;
}
.goog-text-highlight {
  background: transparent !important;
  box-shadow: none !important;
}
iframe.goog-te-banner-frame {
  display: none !important;
}

/* Support for prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .marquee-track,
  .reveal-fade-up,
  .reveal-hero-in {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Infinite scrolling marquee */
.marquee-wrapper {
  overflow: hidden;
  user-select: none;
  width: 100%;
}
.marquee-track-horizontal {
  display: flex;
  width: max-content;
  gap: 2rem;
  animation: lp-marquee 25s linear infinite;
}
.marquee-track-horizontal:hover {
  animation-play-state: paused;
}
.marquee-group {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-shrink: 0;
  min-width: max-content;
}