/* ===========================================================================
   VSightX — Design tokens (liquid glass, deep blue scene)
   Load before glass.css and before your Bootstrap overrides.

   Naming follows your existing kit: every component colour comes from a
   --<variant>-1 / -2 / -line triplet. Change those and the whole kit reskins.
   =========================================================================== */

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

:root {
  --font-ui:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* ---- Scene: diagonal navy --------------------------------------------
     A single diagonal, light top-left to dark bottom-right, with a cyan
     wash top-right and a warm bloom bottom-left for brand identity. Set on
     the root so it also fills the scrollbar gutter (no vertical seam).    */



  --bg-base: #14213D;
  --scene:
    radial-gradient(60% 55% at 92% 6%,  rgba(60, 175, 216, .22), transparent 60%),
    radial-gradient(52% 46% at 6% 96%,  rgba(226, 124, 66, .13), transparent 62%),
    linear-gradient(135deg, #294672 0%, #192D50 46%, #0E1B33 100%);




  --ink:      #E9EFFC;
  --ink-dim:  #9BADD2;
  --ink-mute: #6F82A8;

  /* ---- Variant pairs: top / bottom of the glass gradient, plus rim ------
     Primary is warm on purpose. On a blue scene a blue primary button sinks
     into the backdrop; warm gives the one thing the user should press maximum
     separation, and keeps the Auth0 feel you liked.
     Prefer a blue primary? Put data-primary="azure" on <html>.             */
  --primary-1: rgba(255, 156, 66, .90);    --primary-2: rgba(198, 74, 28, .86);  --primary-line: #FFB03C;
  --azure-1:   rgba(84, 156, 236, .88);    --azure-2:   rgba(26, 78, 158, .84);  --azure-line:   #7FBCF5;
  --secondary-1: rgba(132, 148, 186, .55); --secondary-2: rgba(50, 62, 92, .58); --secondary-line: #A8B6D6;
  --success-1: rgba(46, 194, 90, .86);     --success-2: rgba(12, 94, 45, .84);   --success-line: #43DC71;
  --danger-1:  rgba(232, 92, 122, .86);    --danger-2:  rgba(122, 28, 54, .84);  --danger-line:  #FF7E9E;
  --warning-1: rgba(228, 213, 62, .88);    --warning-2: rgba(124, 108, 24, .84); --warning-line: #F5E74E;
  --busy-line: #F0553D;   /* presence: Busy — distinct from Away (amber) and Do-not-disturb (rose). */
  --info-1:    rgba(58, 200, 222, .88);    --info-2:    rgba(12, 90, 116, .84);  --info-line:    #4FD8E8;

  /* Brand shorthands. Warm = a person did this. Cyan = the system did this. */
  --flare: #FFB03C;
  --beam:  #4FD8E8;
  --live:  #FF4D6A;   /* recording. Reserved — never decorative. */

  /* ---- Glass physics ----------------------------------------------------
     One place to tune the whole material. Push --glass-fill past about .10 and
     frosted glass turns into plastic; the rim and the gloss are what sell it. */
  --glass-fill:    rgba(255, 255, 255, .055);
  --glass-fill-2:  rgba(255, 255, 255, .085);
  --glass-rim:     rgba(255, 255, 255, .13);
  --glass-rim-2:   rgba(255, 255, 255, .20);
  --glass-gloss:   inset 0 1px 0 rgba(255, 255, 255, .18);
  --glass-gloss-2: inset 0 1px 0 rgba(255, 255, 255, .38);
  --glass-blur:    blur(16px) saturate(135%);
  --glass-blur-sm: blur(8px)  saturate(140%);
  --glass-blur-lg: blur(24px) saturate(140%);
  --glass-drop:    0 14px 40px rgba(2, 8, 24, .42);
  --glass-drop-lg: 0 22px 60px rgba(2, 8, 24, .55);

  /* Tint for menus and popovers that have to stay readable over anything. */
  --glass-panel: rgba(11, 22, 46, .82);

  /* ---- Type -------------------------------------------------------------- */
  --fs-display: clamp(28px, 5vw, 44px);
  --fs-h1: clamp(22px, 3.4vw, 30px);
  --fs-h2: 19px;
  --fs-h3: 16px;
  --fs-lg: 15.5px;
  --fs-md: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-label: 11px;   --ls-label: .22em;

  /* ---- Shape, space, motion ---------------------------------------------- */
  --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 26px; --r-full: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px;
  --sp-6: 28px; --sp-8: 38px; --sp-10: 52px; --sp-12: 72px;

  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 120ms; --t-base: 200ms; --t-slow: 340ms;
}

/* Swap the primary to blue in one attribute, if you'd rather not go warm. */
[data-primary='azure'] {
  --primary-1: var(--azure-1);
  --primary-2: var(--azure-2);
  --primary-line: var(--azure-line);
}

/* ---- Scene application ---------------------------------------------------
   Fixed attachment so the glass appears to sit still while content scrolls
   behind it. That parallax is most of the illusion.                          */
html, body { min-height: 100%; }
/* Reserve the scrollbar's space permanently so the content width doesn't jump when it appears/disappears.
   That width jump is what forced a reflow of the team grid, and the glass (backdrop-filter) cards don't
   always repaint on reflow — which left the ghost tiles after a page-size change. */
html {
  /* The scene lives on the root as well, so it paints the reserved scrollbar-gutter column — otherwise
     that ~15px strip shows a flat colour and reads as a vertical bar against the gradient. */
  scrollbar-gutter: stable;
  background-color: var(--bg-base);
  background-image: var(--scene);
  background-attachment: fixed;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  color: var(--ink);
  background-color: var(--bg-base);
  background-image: var(--scene);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* Fine grain — kills the banding you always get across large dark gradients. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* Themed scrollbars. The real cause of the "vertical bar on the right": scrollbar-gutter reserves a ~15px
   column and the browser paints its DEFAULT (pale) scrollbar track there — a UA-styled layer that sits above
   the page background, so no --scene change could ever hide it. Make the track transparent (the scene shows
   through the gutter) and give the thumb a thin, subtle shape that belongs to the dark surface. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .26); }
::-webkit-scrollbar-corner { background: transparent; }

::selection { background: var(--primary-line); color: #201004; }

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

/* Backdrop blur is expensive, and some field devices won't have it at all.
   Everything degrades to a solid tinted panel rather than a transparent mess. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-fill: rgba(16, 30, 60, .90); --glass-fill-2: rgba(22, 40, 76, .94); }
}