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

:root {
  --lp-accent: #FF4801;
  --lp-accent-hover: #E63D00;
  --lp-accent-light: rgba(255, 72, 1, 0.08);
  --lp-text: #0F172A;
  --lp-text-muted: #475569;
  --lp-text-subtle: #94A3B8;
  --lp-bg-page: #FAF8F5;
  --lp-bg-card: #FFFFFF;
  --lp-bg-alt: #F3EFEA;
  --lp-border: #E5DFD5;
  --lp-border-light: rgba(229, 223, 213, 0.6);
  --navy-dark: #0B0F19;
  --navy-card: #151D2A;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

html.dark {
  --lp-accent: #FF5A1F;
  --lp-accent-hover: #FF7038;
  --lp-accent-light: rgba(255, 90, 31, 0.15);
  --lp-text: #F8FAFC;
  --lp-text-muted: #94A3B8;
  --lp-text-subtle: #64748B;
  --lp-bg-page: #0B0F19;
  --lp-bg-card: #131A28;
  --lp-bg-alt: #1A2334;
  --lp-border: #263347;
  --lp-border-light: rgba(38, 51, 71, 0.6);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  background-color: var(--lp-bg-page);
  color: var(--lp-text);
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
  -webkit-font-smoothing: antialiased;
}

/* Corner bracket decoration */
.corner-brackets {
  position: relative;
}

.corner-bracket {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid var(--lp-border);
  border-radius: 1px;
  background-color: var(--lp-bg-card);
  z-index: 5;
  pointer-events: none;
}

.corner-bracket.top-left { top: -4px; left: -4px; }
.corner-bracket.top-right { top: -4px; right: -4px; }
.corner-bracket.bottom-left { bottom: -4px; left: -4px; }
.corner-bracket.bottom-right { bottom: -4px; right: -4px; }

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--lp-bg-page);
}
::-webkit-scrollbar-thumb {
  background: var(--lp-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--lp-accent);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Focus styles */
:focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 2px;
}

/* Dot Pattern */
.bg-dot-pattern {
  background-image: radial-gradient(var(--lp-border) 1px, transparent 1px);
  background-size: 16px 16px;
}