@import "tailwindcss";

@theme {
  --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
}

:root {
  /* Light mode (warm paper) */
  --p-bg-light:        #F4EEE3;
  --p-surface-light:   #FBF6ED;
  --p-surface-2-light: #FFFBF2;
  --p-border-light:    #E4DACA;
  --p-chip-light:      #EDE3D0;
  --p-text-light:      #1A1714;
  --p-muted-light:     #786E60;
  --p-shadow-soft-light:  rgba(60, 40, 20, 0.22);
  --p-shadow-inset-light: rgba(255, 255, 255, 0.7);

  /* Dark mode */
  --p-bg-dark:        #0F1117;
  --p-surface-dark:   #161922;
  --p-surface-2-dark: #1B1F2A;
  --p-border-dark:    #262A36;
  --p-chip-dark:      #1E222D;
  --p-text-dark:      #F2F2EF;
  --p-muted-dark:     #8B919C;
  --p-shadow-soft-dark:  rgba(0, 0, 0, 0.6);
  --p-shadow-inset-dark: rgba(255, 255, 255, 0.03);

  /* Accent — default lime */
  --p-accent-light: #5B8C3E;
  --p-accent-dark:  #A8FF60;
  --p-accent-ink-light: #FFFBF2;
  --p-accent-ink-dark:  #0F1117;
}

.plimi-theme-light {
  --p-bg:           var(--p-bg-light);
  --p-surface:      var(--p-surface-light);
  --p-surface-2:    var(--p-surface-2-light);
  --p-border:       var(--p-border-light);
  --p-chip:         var(--p-chip-light);
  --p-text:         var(--p-text-light);
  --p-muted:        var(--p-muted-light);
  --p-shadow-soft:  var(--p-shadow-soft-light);
  --p-shadow-inset: var(--p-shadow-inset-light);
  --p-accent:       var(--p-accent-light);
  --p-accent-ink:   var(--p-accent-ink-light);
  --p-paper-noise:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.42  0 0 0 0 0.34  0 0 0 0 0.22  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.plimi-theme-dark {
  --p-bg:           var(--p-bg-dark);
  --p-surface:      var(--p-surface-dark);
  --p-surface-2:    var(--p-surface-2-dark);
  --p-border:       var(--p-border-dark);
  --p-chip:         var(--p-chip-dark);
  --p-text:         var(--p-text-dark);
  --p-muted:        var(--p-muted-dark);
  --p-shadow-soft:  var(--p-shadow-soft-dark);
  --p-shadow-inset: var(--p-shadow-inset-dark);
  --p-accent:       var(--p-accent-dark);
  --p-accent-ink:   var(--p-accent-ink-dark);
  --p-paper-noise:  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Animations */
@keyframes plimi-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes plimi-slide {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Staggered tile reveal (directory) */
@keyframes plimi-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Mobile menu sheet drop */
@keyframes plimi-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-plimi-fade {
  animation: plimi-fade 0.18s ease-out;
}

.animate-plimi-slide {
  animation: plimi-slide 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.animate-plimi-rise {
  animation: plimi-rise 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.animate-plimi-drop {
  animation: plimi-drop 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .animate-plimi-fade,
  .animate-plimi-slide,
  .animate-plimi-rise,
  .animate-plimi-drop {
    animation: none !important;
  }
}

/* Hide scrollbar but keep scroll (mobile chip rows, etc.) */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Honour iOS/Android safe areas at the app edges */
.pt-safe { padding-top: env(safe-area-inset-top); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

html, body {
  margin: 0; 
  padding: 0; 
  height: 100%;
  background: var(--p-bg);
  color: var(--p-text);
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

button:focus-visible {
  outline: 2px solid var(--p-accent);
  outline-offset: 2px;
}

input::placeholder {
  color: var(--p-muted);
  opacity: 0.7;
}

/* Scrollbar styling to match the sleek design */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--p-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--p-muted);
}
