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

:root {
  --color-prism-dark: #101820;
  --color-prism-darker: #0B1015;
  --color-prism-surface: #16222D;
  --color-prism-border: #222E3A;
  --color-prism-light: #FFFFFF;
  --color-prism-light-bg: #F8FAFC;
  --color-prism-light-surface: #F1F5F9;
  --color-prism-light-border: #E2E8F0;
  
  --color-brand-carbon: #8E9BA7;
  --color-brand-nano: #7C5CFC;
  --color-brand-ultra: #C69C4E;
  --color-brand-ppf: #1E293B;
  
  --font-michroma: 'Michroma', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Base resets & typography */
html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--color-prism-dark);
  color: #E2E8F0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
}

.font-michroma {
  font-family: var(--font-michroma);
}

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

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0B0E12;
}
::-webkit-scrollbar-thumb {
  background: #2A3644;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3B4B5E;
}

/* Subtle Triangular Geometric Tessellation Pattern (Seen in Dealer & Tint Box sections) */
.bg-prism-pattern {
  background-color: #101820;
  background-image: 
    linear-gradient(30deg, #161E27 12%, transparent 12.5%, transparent 87%, #161E27 87.5%, #161E27),
    linear-gradient(150deg, #161E27 12%, transparent 12.5%, transparent 87%, #161E27 87.5%, #161E27),
    linear-gradient(30deg, #161E27 12%, transparent 12.5%, transparent 87%, #161E27 87.5%, #161E27),
    linear-gradient(150deg, #161E27 12%, transparent 12.5%, transparent 87%, #161E27 87.5%, #161E27),
    linear-gradient(60deg, #131A22 25%, transparent 25.5%, transparent 75%, #131A22 75%, #131A22),
    linear-gradient(60deg, #131A22 25%, transparent 25.5%, transparent 75%, #131A22 75%, #131A22);
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

/* Chamfered Box End Label Corner */
.box-end-label {
  clip-path: polygon(0 0, calc(100% - 38px) 0, 100% 38px, 100% 100%, 0 100%);
}

.box-end-label-tab {
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

/* Light beams running across hero */
.light-beam-silver {
  background: linear-gradient(90deg, #8E9BA7 0%, rgba(142, 155, 167, 0.9) 80%, rgba(142, 155, 167, 0.4) 100%);
}
.light-beam-purple {
  background: linear-gradient(90deg, #7C5CFC 0%, rgba(124, 92, 252, 0.9) 80%, rgba(124, 92, 252, 0.4) 100%);
}
.light-beam-gold {
  background: linear-gradient(90deg, #C69C4E 0%, rgba(198, 156, 78, 0.9) 80%, rgba(198, 156, 78, 0.4) 100%);
}

/* Animations */
@keyframes pulseSubtle {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; filter: brightness(1.15); }
}

.animate-pulse-subtle {
  animation: pulseSubtle 4s ease-in-out infinite;
}

/* Smooth transitions for interactive chips */
.shade-chip {
  transition: all 0.15s ease-in-out;
}
.shade-chip:hover {
  transform: translateY(-1px);
}
.shade-chip.active {
  background-color: #FFFFFF !important;
  color: #0B0E12 !important;
  border-color: #FFFFFF !important;
  font-weight: 700;
}

/* Rack Box Item */
.rack-box {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  position: relative;
}
.rack-box:hover {
  transform: translateY(-2px);
  filter: brightness(1.2);
}
.rack-box.active {
  outline: 2px solid #FFFFFF;
  outline-offset: 1px;
}

/* Modal styles */
.modal-backdrop {
  background-color: rgba(11, 14, 18, 0.85);
  backdrop-filter: blur(8px);
}

/* Print / Clean preview utility */
@media print {
  .no-print {
    display: none !important;
  }
}