/* ═══════════════════════════════════════════════════════════════
   Voltica Design System — Global Polish Layer
   Based on: Emil Kowalski, Impeccable, Antigravity principles
   Load AFTER page-specific styles to enhance everything.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─── */
:root {
  /* Easing (Emil Kowalski custom curves) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);

  /* Duration tokens */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;

  /* Shadows — layered for depth */
  --shadow-xs: 0 1px 2px rgba(15,15,26,.04);
  --shadow-sm: 0 1px 3px rgba(15,15,26,.04), 0 1px 2px rgba(15,15,26,.02);
  --shadow-md: 0 4px 16px rgba(15,15,26,.06), 0 1px 3px rgba(15,15,26,.03);
  --shadow-lg: 0 8px 32px rgba(15,15,26,.1), 0 2px 8px rgba(15,15,26,.04);
  --shadow-xl: 0 20px 60px rgba(15,15,26,.14), 0 4px 12px rgba(15,15,26,.05);
}

/* ─── Global: Body smoothing ─── */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ─── Selection color (brand) ─── */
::selection {
  background: rgba(79, 70, 229, 0.15);
  color: var(--ink, #0f0f1a);
}

/* ─── Scrollbar polish (Webkit) ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(15,15,26,.15); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15,15,26,.25); }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(15,15,26,.15) transparent; }

/* ─── Page load animation ─── */
@keyframes ds-fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ds-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Utility classes for stagger entrance */
.ds-animate { animation: ds-fadeInUp var(--duration-slow) var(--ease-out) both; }
.ds-animate-delay-1 { animation-delay: 50ms; }
.ds-animate-delay-2 { animation-delay: 100ms; }
.ds-animate-delay-3 { animation-delay: 150ms; }
.ds-animate-delay-4 { animation-delay: 200ms; }
.ds-animate-delay-5 { animation-delay: 250ms; }

/* ─── All buttons: press feedback (Emil Kowalski) ─── */
button, [role="button"], a.btn-main, .v-btn, .btn-m-save, .btn-m-cancel {
  -webkit-tap-highlight-color: transparent;
}
/* Active state scale — subtle tactile feedback */
button:active:not(:disabled):not([data-no-press]),
[role="button"]:active:not(:disabled) {
  transform: scale(0.97);
  transition: transform 80ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

/* ─── All inputs: better focus transitions ─── */
input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--primary, #4f46e5);
  box-shadow: 0 0 0 3px rgba(79,70,229,.08);
}

/* ─── Links: smooth color transition ─── */
a {
  transition: color 150ms ease;
}

/* ─── Images: prevent drag ghost on cards ─── */
img, svg {
  user-select: none;
  -webkit-user-drag: none;
}

/* ─── Live status dot pulse ─── */
@keyframes ds-livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ─── Skeleton shimmer (improved) ─── */
@keyframes ds-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ─── Focus visible ring (accessibility) ─── */
:focus-visible {
  outline: 2px solid var(--primary, #4f46e5);
  outline-offset: 2px;
}
/* Remove outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Reduced Motion (Emil Kowalski: reduce, not eliminate) ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Keep opacity for comprehension */
  .v-toast, .toast, .modal, .v-modal {
    transition: opacity 0.15s ease !important;
    transform: none !important;
  }
}

/* ─── Print: strip decorative elements ─── */
@media print {
  .topnav, .nav-hamburger, .mobile-nav-overlay, .mobile-nav-panel,
  .v-toast, .toast, .btn-logout { display: none !important; }
  body { background: white !important; }
  * { box-shadow: none !important; }
}