/* ============================================================
   BASE.CSS — Variables, brand utilities, layout primitives
   MedBill Services
   ============================================================ */

/* ── Material Symbols override ───────────────────────────── */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

/* ── Brand gradients ─────────────────────────────────────── */
.signature-gradient {
  background: linear-gradient(135deg, #a60f0f 0%, #7a0b0b 100%);
}

.cta-gradient {
  background: linear-gradient(135deg, #a60f0f 0%, #850c0c 100%);
}

/* ── Glass header ────────────────────────────────────────── */
.glass-header {
  background: rgba(242, 242, 242, 0.85);
  backdrop-filter: blur(12px);
}

/* ── Text effects ────────────────────────────────────────── */
.text-stroke {
  -webkit-text-stroke: 1px rgba(166, 15, 15, 0.3);
  color: transparent;
}

/* ── Background patterns ─────────────────────────────────── */
.hero-pattern {
  background-image: radial-gradient(
    circle at 2px 2px,
    rgba(166, 15, 15, 0.05) 1px,
    transparent 0
  );
  background-size: 32px 32px;
}

.dark-grid-pattern {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── Elevation helpers ───────────────────────────────────── */
.ambient-shadow {
  box-shadow: 0 20px 40px rgba(166, 15, 15, 0.06);
}

/* ── Hero dark background ────────────────────────────────── */
.hero-dark {
  background: linear-gradient(135deg, #0f0f0f 0%, #1a0505 50%, #0f0f0f 100%);
}

/* ── Hero grid overlay ───────────────────────────────────── */
.hero-grid-pattern {
  background-image:
    linear-gradient(rgba(166, 15, 15, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 15, 15, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Modern UI Utilities ─────────────────────────────────── */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.floating {
  animation: floating 3s ease-in-out infinite;
}

.floating-delayed {
  animation: floating 3s ease-in-out 1.5s infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

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