/* Vutex shared design system reference -- true brand colors (#002878 /
   #287800 / #f02800), 20px card radius, blur(20px) saturate(180%) glass.
   The helpdesk admin console (vutex-react/src/index.css) already matches
   this exactly and is the more complete implementation (adds dark mode +
   extra blur tiers) -- these values aren't duplicated verbatim into that
   file to avoid an !important collision with its dark-mode support, but
   the color/radius/blur values themselves are identical by design. The
   public site (vutex-www/src/styles.css) aliases these same brand colors
   in under --vblue/--vgreen/--vred and uses the same 20px/blur(20px)
   treatment on its main cards, layering its own particle/tilt effects on
   top as additional polish. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('./assets/vutex-tokens.css');

:root {
  --vx-blue: #002878;
  --vx-blue-2: #1e4fd6;
  --vx-green: #287800;
  --vx-red: #f02800;
  --vx-radius: 20px;
  --vx-spring: cubic-bezier(.34, 1.56, .64, 1);
  --vx-ease: cubic-bezier(.4, 0, .2, 1);

  --vutex-blue: #002878;
  --vutex-green: #287800;
  --vutex-red: #f02800;
  --vblue: #002878;
  --vgreen: #287800;
  --vred: #f02800;
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  --bg-1: #eef2fb;
  --bg-2: #dde6f7;
  --bg-3: #f6f9ff;
  --glass: rgba(255, 255, 255, .72);
  --glass-2: rgba(255, 255, 255, .55);
  --glass-brd: rgba(0, 40, 120, .10);
  --txt: #0b1b3a;
  --txt-soft: #4a5878;
  --txt-mut: #7a86a3;
  --shadow: 0 20px 50px -18px rgba(0, 40, 120, .35);

  --glass-bg: var(--glass-2);
  --glass-bg-strong: var(--glass);
  --glass-border: var(--glass-brd);
  --card-bg: var(--glass);
  --card-bg-solid: var(--glass);
  --card-border: var(--glass-brd);
  --card-shadow: var(--shadow);
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--txt) !important;
  background: var(--bg-1) !important;
}
body {
  position: relative;
  isolation: isolate;
}

/* Stronger, clearly-visible drifting color blotches -- previous version
   was too faint against the pale base gradient and read as flat. */
body::before {
  content: '';
  position: fixed;
  inset: -30%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 38% at 16% 18%, rgba(30, 79, 214, .50), transparent 55%),
    radial-gradient(34% 34% at 86% 10%, rgba(40, 120, 0, .38), transparent 55%),
    radial-gradient(40% 40% at 74% 90%, rgba(240, 40, 0, .32), transparent 55%),
    linear-gradient(160deg, var(--bg-2), var(--bg-3));
  filter: saturate(140%);
  animation: vxDrift 26s ease-in-out infinite alternate;
}
@keyframes vxDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 3%, 0) scale(1.1); }
}

/* Frosted glass cards -- matches .tile on the live homepage. */
.card {
  background: var(--glass) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid var(--glass-brd) !important;
  border-radius: var(--vx-radius) !important;
  box-shadow: var(--shadow) !important;
  transition: transform .3s var(--vx-spring), box-shadow .3s, border-color .3s;
}
.card:hover { transform: translateY(-4px); }

/* Force readable dark text inside any .card -- fixes hub/production
   pages whose title/desc text was written white for the old dark
   cards and is now invisible on the new light glass. */
.card, .card * { color: var(--txt) !important; text-shadow: none !important; }
.card .desc, .card .sub, .card .l { color: var(--txt-soft) !important; }
.card.disabled, .card.disabled * { color: var(--txt-mut) !important; }
.card .badge-soon { background: var(--glass-brd) !important; color: var(--txt-soft) !important; }
.card .up, .card .status-up, .card [class*="status-up"] { color: var(--vx-green) !important; }
.card .down, .card .status-down, .card [class*="status-down"] { color: var(--vx-red) !important; }

a { color: var(--vx-blue); }
.status-up, .up, [class*="status-up"] { color: var(--vx-green) !important; }
.status-down, .down, [class*="status-down"] { color: var(--vx-red) !important; }