/* glass-core.css: shared glassmorphism tokens & helpers */
:root {
  --glass-bg-strong: rgba(15,23,42,0.92);
  --glass-bg-soft: rgba(15,23,42,0.78);
  --glass-bg-subtle: rgba(15,23,42,0.65);
  --glass-border: rgba(148,163,184,0.45);
  --glass-border-soft: rgba(148,163,184,0.25);
  --glass-highlight: rgba(56,189,248,0.28);
  --glass-radius-md: 6px;
  --glass-radius-lg: 8px;
  --glass-blur: 18px;
  --glass-shadow-lg: 0 24px 60px rgba(15,23,42,0.95);
}

/* Generic helpers you can add as extra classes if you want */
.glass-panel {
  background: linear-gradient(
    135deg,
    var(--glass-bg-soft),
    rgba(30,64,175,0.32)
  );
  border-radius: var(--glass-radius-lg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: var(--glass-shadow-lg);
}

.glass-bar {
  background: linear-gradient(
    90deg,
    var(--glass-bg-strong),
    rgba(30,64,175,0.25)
  );
  border-radius: 8px;
  border: 1px solid var(--glass-border-soft);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  box-shadow: 0 12px 40px rgba(15,23,42,0.85);
}

.glass-chip {
  background: radial-gradient(circle at top left,
    rgba(56,189,248,0.26),
    rgba(15,23,42,0.9)
  );
  border-radius: 8px;
  border: 1px solid var(--glass-border-soft);
}

/* Smooth border color and background transitions */
.glass-smooth {
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.06s ease;
}

.glass-smooth:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 60px rgba(15,23,42,0.95);
  border-color: var(--glass-highlight);
}