/* =====================================================================
   SACS Freight OS — Base Styles
   Version: 1.0
   Purpose: Reset, scrollbar, animations, utilities
   ===================================================================== */

/* ------------------------------------------------------------------
   RESET
   ------------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Form element base */
input, textarea, select {
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--text-primary);
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ------------------------------------------------------------------
   FOCUS VISIBLE (Accessibility)
   ------------------------------------------------------------------ */

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

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.25);
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(79, 142, 247, 0.2);
}

.sacs-btn:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.sacs-btn--danger:focus-visible {
  outline-color: var(--accent-red);
  box-shadow: 0 0 0 4px rgba(240, 82, 82, 0.2);
}

.sacs-btn--success:focus-visible {
  outline-color: var(--accent-green);
  box-shadow: 0 0 0 4px rgba(16, 212, 136, 0.2);
}

/* ------------------------------------------------------------------
   SCROLLBAR
   ------------------------------------------------------------------ */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-medium) transparent;
}

/* ------------------------------------------------------------------
   KEYFRAME ANIMATIONS
   ------------------------------------------------------------------ */
@keyframes sacs-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

@keyframes sacs-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes sacs-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sacs-fadeout {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

@keyframes sacs-slideup {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sacs-toast-in {
  0%   { opacity: 0; transform: translateX(20px); }
  15%  { opacity: 1; transform: translateX(0); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(10px); }
}

@keyframes sacs-glow {
  0%, 100% { box-shadow: 0 0 8px var(--blue-glow); }
  50%      { box-shadow: 0 0 16px rgba(79,142,247,0.4); }
}

@keyframes sacs-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes sacs-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------------
   UTILITY CLASSES
   ------------------------------------------------------------------ */

/* Visibility */
.sacs-hidden   { display: none !important; }
.sacs-invisible{ visibility: hidden !important; }
.sacs-opacity-0{ opacity: 0 !important; }

/* Flex utilities */
.sacs-flex      { display: flex; }
.sacs-flex-col  { display: flex; flex-direction: column; }
.sacs-flex-wrap { flex-wrap: wrap; }
.sacs-items-center   { align-items: center; }
.sacs-items-start    { align-items: flex-start; }
.sacs-justify-between{ justify-content: space-between; }
.sacs-justify-center { justify-content: center; }
.sacs-justify-end    { justify-content: flex-end; }
.sacs-flex-1    { flex: 1; }
.sacs-flex-shrink-0 { flex-shrink: 0; }
.sacs-gap-1     { gap: var(--space-1); }
.sacs-gap-2     { gap: var(--space-2); }
.sacs-gap-3     { gap: var(--space-3); }
.sacs-gap-4     { gap: var(--space-4); }

/* Spacing utilities */
.sacs-p-2  { padding: var(--space-2); }
.sacs-p-3  { padding: var(--space-3); }
.sacs-p-4  { padding: var(--space-4); }
.sacs-m-0  { margin: 0; }
.sacs-mt-2 { margin-top: var(--space-2); }
.sacs-mt-3 { margin-top: var(--space-3); }
.sacs-mb-2 { margin-bottom: var(--space-2); }
.sacs-mb-3 { margin-bottom: var(--space-3); }

/* Text utilities */
.sacs-text-primary   { color: var(--text-primary); }
.sacs-text-secondary { color: var(--text-secondary); }
.sacs-text-tertiary  { color: var(--text-tertiary); }
.sacs-text-blue      { color: var(--accent-blue); }
.sacs-text-green     { color: var(--accent-green); }
.sacs-text-red       { color: var(--accent-red); }
.sacs-text-amber     { color: var(--accent-amber); }
.sacs-text-teal      { color: var(--accent-teal); }
.sacs-font-medium    { font-weight: 600; }
.sacs-font-bold      { font-weight: 700; }
.sacs-font-extrabold { font-weight: 800; }
.sacs-text-center    { text-align: center; }
.sacs-text-right     { text-align: right; }
.sacs-truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Background utilities */
.sacs-bg-base      { background: var(--bg-base); }
.sacs-bg-elevated  { background: var(--bg-elevated); }
.sacs-bg-card      { background: var(--bg-card); }
.sacs-bg-hover     { background: var(--bg-hover); }

/* Border utilities */
.sacs-border-subtle  { border: 1px solid var(--border-subtle); }
.sacs-border-medium  { border: 1px solid var(--border-medium); }
.sacs-rounded-md     { border-radius: var(--radius-md); }
.sacs-rounded-lg     { border-radius: var(--radius-lg); }
.sacs-rounded-xl     { border-radius: var(--radius-xl); }
.sacs-rounded-full   { border-radius: var(--radius-full); }

/* Animation utilities */
.sacs-animate-fadein  { animation: sacs-fadein var(--duration-normal) var(--ease-default); }
.sacs-animate-slideup { animation: sacs-slideup var(--duration-slow) var(--ease-out); }
.sacs-animate-pulse   { animation: sacs-pulse 1.5s infinite; }
.sacs-animate-spin    { animation: sacs-spin 0.8s linear infinite; }

/* Cursor */
.sacs-cursor-pointer { cursor: pointer; }
.sacs-cursor-default { cursor: default; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}