/* ============================================================
   EPICURE LOUNGE — MudBlazor bridge
   Maps the design system (epicure.css tokens) onto MudBlazor so every
   Mud* component renders on-brand. Loaded AFTER MudBlazor.min.css + epicure.css.
   ============================================================ */

/* ---- Page canvas: the design's warm slate gradient ---- */
html, body { background: var(--bg-1); }
body {
  font-family: var(--sans);
  background:
    radial-gradient(1200px 700px at 78% -8%, var(--gold-soft), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  background-attachment: fixed;
  color: var(--text);
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
}
.mud-layout, .mud-main-content { background: transparent !important; }

/* ---- Typography: Cormorant display, Mulish UI ---- */
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
  font-family: var(--serif) !important;
  font-weight: 600;
  letter-spacing: .004em;
}
.mud-typography-body1, .mud-typography-body2,
.mud-typography-subtitle1, .mud-typography-subtitle2,
.mud-typography-caption, .mud-typography-button, .mud-input, .mud-input-root {
  font-family: var(--sans) !important;
}

/* ---- App bar: translucent, blurred, hairline ---- */
.mud-appbar {
  background-color: color-mix(in srgb, var(--bg-1) 82%, transparent) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
}

/* ---- Drawer (sidebar): gradient + hairline ---- */
.mud-drawer {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1)) !important;
  border-right: 1px solid var(--line) !important;
}

/* ---- Primary CTA: whisky-gold gradient pill ---- */
.mud-button-filled.mud-button-filled-primary {
  background-image: linear-gradient(180deg, #D8A53C, var(--gold-bright));
  color: #1A1206 !important;
  box-shadow: 0 10px 26px -12px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,.28);
  border-radius: var(--r-pill);
}
.mud-button-filled.mud-button-filled-primary:hover { filter: brightness(1.04); }
.mud-button-outlined, .mud-button-text { border-radius: var(--r-pill); }

/* ---- Cards: soft top-light gradient, hairline, gold edge on hover ---- */
.mud-card {
  background-image: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.mud-card:hover { border-color: var(--line-gold); }

/* ---- Inputs: gold focus ring ---- */
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 4px var(--gold-glow);
}

/* ---- Nav: grouped sidebar, gold active rail ---- */
.mud-nav-link.active {
  color: var(--gold) !important;
  background: var(--gold-soft);
}
.mud-nav-link.active::before {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 3px; border-radius: 99px; background: var(--gold);
}
.mud-nav-link { position: relative; border-radius: var(--r-md); }

/* ---- Links → champagne gold ---- */
.mud-link { color: var(--gold) !important; }

/* ---- Brand lockup in the app bar (uses logo PNG via epicure.css .brand-logo) ---- */
.brand-logo { height: 38px; }

/* ---- "soon" future-module nav items ---- */
.nav-soon { opacity: .5; }
.nav-soon .soon-tag {
  margin-left: auto; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--line); padding: 2px 6px; border-radius: 5px;
}