/* ============================================================
   DS SIGHT — Effects: chrome gradients, shadows, glows, blur
   Keep backgrounds dark and the chrome luminous.
   ============================================================ */

:root {
  /* ---- Signature chrome gradient (180deg, the wordmark shine) ---- */
  --chrome-gradient: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #D8DCE6 18%,
    #9AA3B8 34%,
    #FFFFFF 48%,
    #B0B6C8 62%,
    #6E7485 78%,
    #C8CCD8 92%,
    #E8EAF2 100%
  ); /* @kind color */

  /* ---- Chrome border gradient (for CTA borders, capsules) ---- */
  --chrome-border-gradient: linear-gradient(
    180deg, #E8EAF2 0%, #9AA3B8 50%, #2A2D38 100%
  ); /* @kind color */

  /* ---- Brushed-metal panel sheen ---- */
  --chrome-panel: linear-gradient(
    135deg, #20242F 0%, #14171F 50%, #1C2030 100%
  ); /* @kind color */

  /* ---- Subtle dark vignette / depth field ---- */
  --depth-radial: radial-gradient(
    120% 90% at 50% 0%, #14182400 0%, #060608 75%
  ); /* @kind color */

  /* ---- Shadows (outer) ---- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.55);
  --shadow-lg:  0 24px 60px rgba(0,0,0,0.65);

  /* ---- Inner chrome edge highlight (top bevel on cards) ---- */
  --edge-highlight: inset 0 1px 0 rgba(255,255,255,0.06); /* @kind shadow */
  --edge-chrome:    inset 0 1px 0 rgba(216,220,230,0.18); /* @kind shadow */

  /* ---- Electric blue glows (light-trail energy) ---- */
  --glow-blue-sm: 0 0 12px rgba(59,158,255,0.45);
  --glow-blue-md: 0 0 24px rgba(59,158,255,0.40), 0 0 4px rgba(59,158,255,0.6);
  --glow-blue-lg: 0 0 48px rgba(59,158,255,0.35), 0 0 12px rgba(59,158,255,0.55);

  /* ---- Glass / blur (used for overlays, sticky nav) ---- */
  --blur-panel: saturate(120%) blur(16px); /* @kind other */
  --scrim:      rgba(6,6,8,0.72); /* @kind color */

  /* ---- Motion: cinematic easing, no bounce ---- */
  --ease-cine:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:    160ms; /* @kind other */
  --dur-base:    240ms; /* @kind other */
  --dur-slow:    480ms; /* @kind other */

  /* ---- Semantic aliases ---- */
  --elevation-card:   var(--shadow-md);
  --elevation-modal:  var(--shadow-lg);
  --focus-ring:       0 0 0 2px var(--void-black), 0 0 0 4px var(--blue);
}

/* ============================================================
   Reusable utility: chrome text fill
   Apply to any element to give it the signature chrome gradient.
   ============================================================ */
.ds-chrome-text {
  background: var(--chrome-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}