/* =============================================================================
   Phase 151O.8.2 — True Global Glass Token Definition

   Purpose: define the real MH Theme glass token/class contract from the approved
   header/nav glass language without applying it broadly to live sections.

   Important:
   - This file must not target all cards, labels, panels, sections, stats, FAQ,
     testimonials, Work cards, or How I Work.
   - Existing sections only change when a template intentionally adds one of the
     new utility classes below.
   - Header/nav/mobile dock continue to be owned by 34__global-glass-system.css.
   ========================================================================== */

:root {
  /* Source-of-truth aliases based on the approved header/nav glass. These do
     not replace the existing --mht-glass-* variables from 34__; they map a
     clearer contract for future intentional use. */
  --mht-glass-nav-bg: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045) 34%, rgba(0,0,0,.16) 100%), var(--mht-glass-bg);
  --mht-glass-nav-bg-fallback: var(--mht-glass-bg-strong);

  --mht-glass-panel-bg: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.040) 36%, rgba(0,0,0,.14) 100%), var(--mht-glass-bg);
  --mht-glass-card-bg: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.034) 38%, rgba(0,0,0,.12) 100%), rgba(8,8,10,.38);
  --mht-glass-label-bg: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.042) 38%, rgba(0,0,0,.12) 100%), rgba(8,8,10,.34);

  --mht-glass-border-line: rgba(255,255,255,.12);
  --mht-glass-border-line-soft: rgba(255,255,255,.075);
  --mht-glass-inner-highlight: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.045);
  --mht-glass-inner-highlight-soft: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.035);
  --mht-glass-blur: var(--mht-glass-filter);
  --mht-glass-shadow-panel: 0 18px 46px rgba(0,0,0,.28), var(--mht-glass-inner-highlight);
  --mht-glass-shadow-card: 0 14px 38px rgba(0,0,0,.22), var(--mht-glass-inner-highlight-soft);
  --mht-glass-shadow-hover: 0 22px 58px rgba(0,0,0,.32), var(--mht-glass-inner-highlight);
  --mht-glass-purple-glow: 0 0 0 1px rgba(183,140,255,.10), 0 24px 70px rgba(76,52,93,.18);
  --mht-glass-text: #F6F2F7;
  --mht-glass-text-muted: rgba(221,214,227,.74);
}

html[data-mht-theme-effective="light"],
html[data-mht-theme="light"] {
  /* Phase 151O.8.4.8: light-mode glass follows the approved dark glass
     material instead of becoming flat white or transparent. Text on glass stays
     on the same off-white/muted-lavender contract as dark mode. The content
     glass shadow contract no longer paints a hard top-edge line. */
  --mht-glass-nav-bg: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045) 34%, rgba(0,0,0,.16) 100%), var(--mht-glass-bg);
  --mht-glass-panel-bg: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.045) 34%, rgba(0,0,0,.16) 100%), var(--mht-glass-bg);
  --mht-glass-card-bg: linear-gradient(180deg, rgba(255,255,255,.115), rgba(255,255,255,.038) 36%, rgba(0,0,0,.14) 100%), rgba(10,10,12,.32);
  --mht-glass-label-bg: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.042) 38%, rgba(0,0,0,.12) 100%), rgba(10,10,12,.30);
  --mht-glass-nav-bg-fallback: var(--mht-glass-bg-strong);
  --mht-glass-border-line: rgba(255,255,255,.12);
  --mht-glass-border-line-soft: rgba(255,255,255,.075);
  --mht-glass-inner-highlight: inset 0 -1px 0 rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.050);
  --mht-glass-inner-highlight-soft: inset 0 -1px 0 rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.040);
  --mht-glass-shadow-panel: 0 16px 42px rgba(47,31,58,.16), var(--mht-glass-inner-highlight);
  --mht-glass-shadow-card: 0 14px 38px rgba(47,31,58,.15), var(--mht-glass-inner-highlight-soft);
  --mht-glass-shadow-hover: 0 22px 58px rgba(47,31,58,.20), var(--mht-glass-inner-highlight);
  --mht-glass-purple-glow: 0 0 0 1px rgba(183,140,255,.10), 0 24px 70px rgba(76,52,93,.16);
  --mht-glass-text: #F6F2F7;
  --mht-glass-text-muted: rgba(221,214,227,.76);
}
/* Utility contract. These are opt-in only. Do not add these class names to all
   existing cards in bulk. Future phases should apply them section-by-section. */
.mht-glass-surface,
.mht-glass-panel,
.mht-glass-card,
.mht-glass-label,
.mht-glass-soft,
.mht-glass-strong {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--mht-glass-text);
  border-radius: var(--mht-radius-lg, 20px);
  -webkit-backdrop-filter: var(--mht-glass-blur);
  backdrop-filter: var(--mht-glass-blur);
}

.mht-glass-surface > *,
.mht-glass-panel > *,
.mht-glass-card > *,
.mht-glass-label > *,
.mht-glass-soft > *,
.mht-glass-strong > * {
  position: relative;
  z-index: 1;
}

.mht-glass-surface::after,
.mht-glass-panel::after,
.mht-glass-card::after,
.mht-glass-label::after,
.mht-glass-soft::after,
.mht-glass-strong::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 0;
  opacity: .54;
  background: linear-gradient(-40deg, rgba(255,255,255,.48) 0%, rgba(255,255,255,.26) 18%, rgba(255,255,255,.10) 44%, rgba(255,255,255,.030) 68%, rgba(255,255,255,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.mht-glass-panel {
  background: var(--mht-glass-panel-bg);
  box-shadow: var(--mht-glass-shadow-panel);
}

.mht-glass-card {
  background: var(--mht-glass-card-bg);
  box-shadow: var(--mht-glass-shadow-card);
}

.mht-glass-label,
.mht-meta-label.mht-glass-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--mht-glass-label-bg);
  box-shadow: var(--mht-glass-inner-highlight-soft);
  color: var(--mht-glass-text-muted);
}

.mht-glass-labels,
.mht-meta-labels.mht-glass-labels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.mht-glass-soft {
  background: var(--mht-glass-card-bg);
  box-shadow: var(--mht-glass-inner-highlight-soft);
}

.mht-glass-strong {
  background: var(--mht-glass-panel-bg);
  box-shadow: var(--mht-glass-shadow-panel), var(--mht-glass-purple-glow);
}



/* Phase 151O.8.4.8: light-mode content glass keeps the angled glass edge,
   but the edge layer is no longer allowed to read as a bright top border. */
html[data-mht-theme-effective="light"] .mht-glass-surface::after,
html[data-mht-theme="light"] .mht-glass-surface::after,
html[data-mht-theme-effective="light"] .mht-glass-panel::after,
html[data-mht-theme="light"] .mht-glass-panel::after,
html[data-mht-theme-effective="light"] .mht-glass-card::after,
html[data-mht-theme="light"] .mht-glass-card::after,
html[data-mht-theme-effective="light"] .mht-glass-label::after,
html[data-mht-theme="light"] .mht-glass-label::after,
html[data-mht-theme-effective="light"] .mht-glass-soft::after,
html[data-mht-theme="light"] .mht-glass-soft::after,
html[data-mht-theme-effective="light"] .mht-glass-strong::after,
html[data-mht-theme="light"] .mht-glass-strong::after {
  opacity: .42;
  background: linear-gradient(-40deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.16) 18%, rgba(255,255,255,.065) 44%, rgba(255,255,255,.020) 68%, rgba(255,255,255,0) 100%);
}

@media (hover: hover) and (pointer: fine) {
  .mht-glass-card:hover,
  .mht-glass-panel:hover,
  .mht-glass-strong:hover {
    box-shadow: var(--mht-glass-shadow-hover), var(--mht-glass-purple-glow);
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .mht-glass-surface,
  .mht-glass-panel,
  .mht-glass-card,
  .mht-glass-label,
  .mht-glass-soft,
  .mht-glass-strong {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--mht-glass-nav-bg-fallback);
  }
}