web/src/index.css

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap");
@import "tailwindcss";
@import "@szl-holdings/design-system/tokens/css";
@import "tw-animate-css";
@plugin "@tailwindcss/typography";

@source "../../../lib/shared-ui/src/**/*.{ts,tsx}";
@source "../../../packages/design-system/src/**/*.{ts,tsx}";

@custom-variant dark (&:is(.dark *));

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}

@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));
  --color-sidebar: hsl(var(--sidebar));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-ring: hsl(var(--sidebar-ring));
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius-sm:  0.125rem;
  --radius-md:  0.25rem;
  --radius-lg:  0.375rem;
  --radius-xl:  0.5rem;
  --radius-2xl: 0.75rem;
}

:root {
  /* Vessels — warm-executive gold, A11oy/Sentra family. */
  --background: 0 0% 4%;
  --foreground: 0 0% 96%;
  --border: 0 0% 10%;
  --input: 0 0% 12%;
  --ring: 41 30% 60%;
  --card: 0 0% 8%;
  --card-foreground: 0 0% 96%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 96%;
  --primary: 41 30% 65%;
  --primary-foreground: 0 0% 4%;
  --secondary: 0 0% 10%;
  --secondary-foreground: 0 0% 70%;
  --muted: 0 0% 9%;
  --muted-foreground: 0 0% 54%;
  --accent: 41 30% 65%;
  --accent-foreground: 0 0% 96%;
  --destructive: 0 50% 45%;
  --destructive-foreground: 0 0% 100%;
  --chart-1: 41 30% 65%;
  --chart-2: 150 25% 42%;
  --chart-3: 35 65% 48%;
  --chart-4: 270 44% 54%;
  --chart-5: 200 30% 50%;
  --sidebar: 0 0% 3%;
  --sidebar-foreground: 0 0% 60%;
  --sidebar-border: 0 0% 9%;
  --sidebar-primary: 41 30% 65%;
  --sidebar-primary-foreground: 0 0% 4%;
  --sidebar-accent: 0 0% 9%;
  --sidebar-accent-foreground: 0 0% 96%;
  --sidebar-ring: 41 30% 65%;

  /* Vessels product tokens — gold-tinted (kept for backwards compat) */
  --vessels-ocean-dim:    rgba(201, 183, 135, 0.08);
  --vessels-ocean-border: rgba(201, 183, 135, 0.16);
  --vessels-teal-dim:     rgba(90, 138, 110, 0.08);
  --vessels-marine:       #141414;
}

@layer base {
  * { @apply border-border; }
  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', system-ui, sans-serif;
    background: #0a0a0a;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    @apply tracking-tight font-semibold;
  }
  ::selection { background: rgba(201, 183, 135, 0.2); color: #f5f5f5; }
}

:focus-visible {
  outline: 2px solid #c9b787;
  outline-offset: 2px;
  border-radius: 2px;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

.skip-to-content {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 9999;
  padding: 0.625rem 1.25rem;
  background: #c9b787;
  color: #0a0a0a;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 2px;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-to-content:focus { top: 1rem; }

.label-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #555;
}

/* Sentra-family aliases — Vessels-named classes used across the pages map to the
   same warm-gold glass-panel pattern. */
.vessel-panel,
.sentra-panel {
  background: #141414;
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 1px solid rgba(201,183,135,0.12);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vessel-panel:hover,
.sentra-panel:hover {
  border-top-color: rgba(201,183,135,0.25);
  border-color: rgba(201,183,135,0.15);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.vessel-card,
.sentra-card {
  background: #141414;
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 2px solid rgba(201,183,135,0.2);
  border-radius: var(--radius-lg);
  transition: border-left-color 0.18s ease, background 0.18s ease;
}
.vessel-card:hover,
.sentra-card:hover {
  border-left-color: rgba(201,183,135,0.5);
  background: #161616;
}

.stat-panel {
  background: #141414;
  border: 1px solid rgba(255,255,255,0.06);
  border-top: 1px solid rgba(201,183,135,0.12);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s ease;
}
.stat-panel:hover { border-color: rgba(201,183,135,0.2); }

.kpi-accent-rule { border-top: 2px solid rgba(201,183,135,0.3); }

.glass-panel {
  background: rgba(14,14,14,0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.hero-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,183,135,0.04) 0%, transparent 70%);
  pointer-events: none;
}

.gradient-text {
  background: linear-gradient(135deg, #f5f5f5 0%, #c9b787 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.accent-line {
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, #c9b787, rgba(201,183,135,0.2));
}

.exception-critical { border-left: 2px solid #b85450; }
.exception-high     { border-left: 2px solid #c9b787; }
.exception-medium   { border-left: 2px solid #c9b787; }
.exception-low      { border-left: 2px solid #5a8a6e; }

.badge-underway  { background: rgba(201,183,135,0.10); color: #c9b787; border: 1px solid rgba(201,183,135,0.24); }
.badge-anchored  { background: rgba(201,183,135,0.06); color: #d4c598; border: 1px solid rgba(201,183,135,0.18); }
.badge-moored    { background: rgba(90,138,110,0.10);  color: #5a8a6e; border: 1px solid rgba(90,138,110,0.22); }
.badge-exception { background: rgba(184,84,80,0.10);   color: #b85450; border: 1px solid rgba(184,84,80,0.22); }

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.6; }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes wave-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}
@keyframes route-dash { to { stroke-dashoffset: -12; } }
@keyframes vessel-ping {
  0%  { transform: scale(1); opacity: 1; }
  75% { transform: scale(2); opacity: 0; }
  100%{ opacity: 0; }
}
@keyframes panel-reveal {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

.animate-fade-in-up     { animation: fade-in-up 0.3s ease-out both; }
.animate-fade-in        { animation: fade-in 0.2s ease-out both; }
.animate-scale-in       { animation: scale-in 0.25s ease-out both; }
.animate-slide-in-right { animation: slide-in-right 0.22s ease-out both; }
.animate-pulse-dot      { animation: pulse-dot 2s ease-in-out infinite; }
.animate-wave-float     { animation: wave-float 4s ease-in-out infinite; }
.animate-vessel-ping    { animation: vessel-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite; }
.animate-panel-reveal   { animation: panel-reveal 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; }

.route-active {
  stroke: #c9b787;
  stroke-width: 2;
  stroke-dasharray: 8 4;
  animation: route-dash 2s linear infinite;
}

.skeleton {
  background: linear-gradient(
    90deg,
    #1a1a1a 25%,
    rgba(255,255,255,0.04) 50%,
    #1a1a1a 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: var(--radius-md);
}

.stagger-1 { animation-delay: 0.04s; }
.stagger-2 { animation-delay: 0.08s; }
.stagger-3 { animation-delay: 0.12s; }
.stagger-4 { animation-delay: 0.16s; }
.stagger-5 { animation-delay: 0.2s; }
.stagger-6 { animation-delay: 0.24s; }
.stagger-7 { animation-delay: 0.28s; }
.stagger-8 { animation-delay: 0.32s; }