/* Import Design System Tokens */
@import url('./design-system/tokens.css');

/* Prevent horizontal overflow */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Global Vintage Archive Aesthetic */
body {
  background-color: var(--color-paper);
  /* Layered textures: paper grain + aged stains */
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 15% 20%, rgba(219, 192, 150, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(180, 150, 120, 0.03) 0%, transparent 50%);
}

/* Custom Scrollbar - Vintage Metal Filing Cabinet */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-hover);
}

/* Folder Tab Shape */
.folder-tab-shape {
  clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
}

/* Search Highlight - Yellow Highlighter Marker */
mark {
  background-color: var(--color-selection-bg);
  color: var(--color-selection-text);
  padding: 0 2px;
  border-radius: 2px;
}

/* Settings sidebar slide-in animation */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Explorer detail panel elevated shadow */
.explorer-detail-panel {
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}