/* LYN Industrial Matcha Custom Styling System */

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

:root {
  --bg-primary: #fcf8f8;
  --bg-secondary: #f1edec;
  --bg-container: #f2f2f2;
  --text-primary: #1c1b1b;
  --text-secondary: #444748;
  --text-muted: #747878;
  --border-color: #c4c7c8;
  --accent-green: #3a5e3a;
  --accent-green-bright: #4ade80;
  --card-hover: #ebe7e7;
  --input-bg: #ffffff;
}

html.dark {
  --bg-primary: #09090b;
  --bg-secondary: #18181b;
  --bg-container: #18181b;
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --border-color: #27272a;
  --accent-green: #528a52;
  --accent-green-bright: #6EE7B7;
  --card-hover: #27272a;
  --input-bg: #18181b;
}

/* Global Dark Mode Color Overrides for High Contrast */
html.dark body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

html.dark .text-on-surface {
  color: #f4f4f5 !important;
}

html.dark .text-on-surface-variant {
  color: #a1a1aa !important;
}

html.dark .text-outline {
  color: #8e9294 !important;
}

html.dark .bg-surface {
  background-color: #121215 !important;
}

html.dark .bg-surface-container {
  background-color: #18181b !important;
}

html.dark .bg-surface-container-low {
  background-color: #18181b !important;
}

html.dark .bg-surface-container-high {
  background-color: #27272a !important;
}

html.dark .bg-primary-container {
  background-color: #18181b !important;
}

html.dark .bg-background {
  background-color: #09090b !important;
}

html.dark .lo-fi-border,
html.dark .lo-fi-border-b,
html.dark .lo-fi-border-t,
html.dark .lo-fi-border-r,
html.dark .lo-fi-border-l,
html.dark .border-outline-variant,
html.dark .border-technical,
html.dark .border-technical-b,
html.dark .border-technical-t {
  border-color: #3f3f46 !important;
}

html.dark .lo-fi-input {
  background-color: #18181b !important;
  color: #f4f4f5 !important;
  border-color: #3f3f46 !important;
}

html.dark .lo-fi-input:focus {
  border-color: #f4f4f5 !important;
  box-shadow: 0 0 0 2px rgba(244, 244, 245, 0.2) !important;
}

/* Button & Card Hover Overrides in Dark Mode */
html.dark .product-tab.bg-surface {
  background-color: #18181b !important;
  color: #a1a1aa !important;
  border-color: #3f3f46 !important;
}

html.dark .product-tab.bg-on-surface {
  background-color: #f4f4f5 !important;
  color: #09090b !important;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Sora', sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.font-mono-tech {
  font-family: 'JetBrains Mono', 'Sora', monospace;
}

/* Brutalist Lo-fi Borders & Layout */
.lo-fi-border {
  border: 1px solid var(--border-color);
}

.lo-fi-border-b {
  border-bottom: 1px solid var(--border-color);
}

.lo-fi-border-t {
  border-top: 1px solid var(--border-color);
}

.lo-fi-border-r {
  border-right: 1px solid var(--border-color);
}

.lo-fi-border-l {
  border-left: 1px solid var(--border-color);
}

/* Technical Scanline Effect Overlay for Brutalist Aesthetic */
.scanline-bg {
  background: linear-gradient(
    rgba(18, 18, 18, 0) 50%, 
    rgba(0, 0, 0, 0.03) 50%
  ), linear-gradient(
    90deg,
    rgba(255, 0, 0, 0.01),
    rgba(0, 255, 0, 0.01),
    rgba(0, 0, 255, 0.01)
  );
  background-size: 100% 4px, 6px 100%;
}

/* Pulsing Status Dot */
.status-dot-active {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px #22c55e;
  animation: pulse-dot 2s infinite ease-in-out;
}

@keyframes pulse-dot {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

/* Transmission Progress Bar Animation */
@keyframes progress-anim {
  0% { width: 0%; }
  50% { width: 70%; }
  100% { width: 100%; }
}

.animate-progress {
  animation: progress-anim 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
  border-left: 1px solid var(--border-color);
}
::-webkit-scrollbar-thumb {
  background: var(--text-muted);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-primary);
}

/* Barcode simulation styling */
.barcode-sim {
  background: repeating-linear-gradient(
    90deg,
    var(--text-primary),
    var(--text-primary) 2px,
    transparent 2px,
    transparent 4px,
    var(--text-primary) 4px,
    var(--text-primary) 8px,
    transparent 8px,
    transparent 11px
  );
  height: 38px;
  width: 100%;
}

/* Print Manifest Styling */
@media print {
  body * {
    visibility: hidden;
  }
  #printable-manifest, #printable-manifest * {
    visibility: visible;
  }
  #printable-manifest {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}