/* =====================================================
   MH Theme — Product Design System Foundation
   Phase 2: token roles + mht-* component contract

   This file does not redesign the existing .mht-* sections. It creates the
   product-level source of truth that old sections and new reusable components
   can share during the controlled migration.
   ===================================================== */

:root {
  color-scheme: dark;

  /* Brand role tokens */
  --mht-color-bg-dark: #0D0D0D;
  --mht-color-surface-dark: #141017;
  --mht-color-elevated-dark: #1B1620;
  --mht-color-text-dark: #F6F2F7;
  --mht-color-text-soft-dark: #DDD6E3;
  --mht-color-text-muted-dark: #AFA4B8;

  --mht-color-bg-light: #F6F2F7;
  --mht-color-surface-light: #FFFFFF;
  --mht-color-elevated-light: #E6D8FF;
  --mht-color-text-light: #2F1F3A;
  --mht-color-text-soft-light: #4C345D;
  --mht-color-text-muted-light: #7C7284;

  --mht-color-brand: #8E63A3;
  --mht-color-brand-soft: #C5A6D3;
  --mht-color-brand-deep: #4C345D;
  --mht-color-accent-glow: #B78CFF;
  --mht-color-accent-light: #E6D8FF;
  --mht-color-border: rgba(44, 37, 50, 0.55);
  --mht-color-border-soft: rgba(44, 37, 50, 0.30);

  /* Active appearance tokens. Default: Dark Editorial. */
  --mht-color-bg: var(--mht-color-bg-dark);
  --mht-color-surface: var(--mht-color-surface-dark);
  --mht-color-elevated: var(--mht-color-elevated-dark);
  --mht-color-text: var(--mht-color-text-dark);
  --mht-color-text-soft: var(--mht-color-text-soft-dark);
  --mht-color-text-muted: var(--mht-color-text-muted-dark);

  /* Typography roles. Product defaults avoid bundled paid fonts. */
  --mht-font-heading: "Migra", serif;
  --mht-font-body: "Blauer Nue", sans-serif;
  --mht-font-ui: var(--mht-font-body);

  /* Layout roles */
  --mht-site-max: 1120px;
  --mht-site-gutter: 40px;
  --mht-site-width: min(var(--mht-site-max), calc(100% - var(--mht-site-gutter)));
  --mht-section-padding-y: clamp(72px, 10vw, 130px);
  --mht-section-head-gap: clamp(30px, 4.2vw, 52px);

  /* Shape/depth roles */
  --mht-radius-sm: 12px;
  --mht-radius-md: 16px;
  --mht-radius-lg: 20px;
  --mht-radius-xl: 28px;
  --mht-radius-pill: 999px;
  --mht-shadow-glass: inset 0 1px 0 rgba(255,255,255,.10), 0 20px 44px rgba(0,0,0,.12), 0 36px 80px rgba(0,0,0,.10);

  /* Motion roles */
  --mht-ease-out: cubic-bezier(.16, 1, .3, 1);
  --mht-ease-soft: cubic-bezier(.22, 1, .36, 1);
  --mht-motion-fast: 160ms;
  --mht-motion-base: 220ms;
  --mht-motion-mid: 320ms;
  --mht-motion-slow: 420ms;
  --mht-motion-reveal: 700ms;
  --mht-reveal-y: 18px;
  --mht-reveal-scale: .985;
  --mht-reveal-opacity: 0;

  /* Legacy token aliases. Keep .mht-* rendering stable while new mht-* classes
     become the product foundation. */
  --bg-primary: var(--mht-color-bg);
  --bg-surface: var(--mht-color-surface);
  --bg-elevated: var(--mht-color-elevated);
  --text-primary: var(--mht-color-text);
  --text-secondary: var(--mht-color-text-soft);
  --text-muted: var(--mht-color-text-muted);
  --text-faint: #7C7284;
  --accent: var(--mht-color-brand);
  --accent-soft: var(--mht-color-brand-soft);
  --accent-deep: var(--mht-color-brand-deep);
  --accent-lime: var(--mht-color-accent-glow);
  --accent-gold: var(--mht-color-accent-light);
  --border: var(--mht-color-border);
  --border-faint: var(--mht-color-border-soft);
  --font-display: var(--mht-font-heading);
  --font-sans: var(--mht-font-body);
  --site-max: var(--mht-site-max);
  --site-gutter: var(--mht-site-gutter);
  --site-w: var(--mht-site-width);
  --section-padding: var(--mht-section-padding-y);
  --section-head-gap: var(--mht-section-head-gap);
  --ease-out: var(--mht-ease-out);
  --ease-soft: var(--mht-ease-soft);
  --t-fast: var(--mht-motion-fast);
  --t-base: var(--mht-motion-base);
  --t-mid: var(--mht-motion-mid);
  --t-slow: var(--mht-motion-slow);
  --t-xslow: var(--mht-motion-reveal);
}

html[data-mht-theme="light"] {
  color-scheme: light;
  --mht-color-bg: var(--mht-color-bg-light);
  --mht-color-surface: var(--mht-color-surface-light);
  --mht-color-elevated: var(--mht-color-elevated-light);
  --mht-color-text: var(--mht-color-text-light);
  --mht-color-text-soft: var(--mht-color-text-soft-light);
  --mht-color-text-muted: var(--mht-color-text-muted-light);
  --mht-color-border: rgba(76, 52, 93, .18);
  --mht-color-border-soft: rgba(76, 52, 93, .12);
}

html[data-mht-theme="system"] { color-scheme: dark light; }
@media (prefers-color-scheme: light) {
  html[data-mht-theme="system"] {
    --mht-color-bg: var(--mht-color-bg-light);
    --mht-color-surface: var(--mht-color-surface-light);
    --mht-color-elevated: var(--mht-color-elevated-light);
    --mht-color-text: var(--mht-color-text-light);
    --mht-color-text-soft: var(--mht-color-text-soft-light);
    --mht-color-text-muted: var(--mht-color-text-muted-light);
    --mht-color-border: rgba(76, 52, 93, .18);
    --mht-color-border-soft: rgba(76, 52, 93, .12);
  }
}

html[data-mht-motion="none"] {
  --mht-reveal-y: 0;
  --mht-reveal-scale: 1;
  --mht-reveal-opacity: 1;
  --mht-motion-reveal: 1ms;
}
html[data-mht-motion="gentle-fade"] { --mht-reveal-y: 0; --mht-reveal-scale: 1; }
html[data-mht-motion="glass-rise"] { --mht-reveal-y: 18px; --mht-reveal-scale: .985; }
html[data-mht-motion="editorial-slide"] { --mht-reveal-y: 26px; --mht-reveal-scale: 1; }
html[data-mht-motion="soft-scale"] { --mht-reveal-y: 10px; --mht-reveal-scale: .97; }
html[data-mht-motion="staggered-cards"] { --mht-reveal-y: 20px; --mht-reveal-scale: .985; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --mht-reveal-y: 0;
    --mht-reveal-scale: 1;
    --mht-reveal-opacity: 1;
    --mht-motion-reveal: 1ms;
  }
}

/* New product class contract. These classes are safe for future patterns and
   section variants. Existing .mht-* classes remain supported. */
.mht-shell {
  width: var(--mht-site-width);
  max-width: var(--mht-site-max);
  margin-inline: auto;
}

.mht-section {
  position: relative;
  padding-block: var(--mht-section-padding-y);
  background: transparent;
}

.mht-section-head {
  max-width: 760px;
  margin-bottom: var(--mht-section-head-gap);
}

.mht-kicker {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 14px;
  font-family: var(--mht-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--mht-color-text-muted);
}
.mht-kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  flex: 0 0 22px;
  background: var(--mht-color-accent-glow);
}

.mht-heading {
  margin: 0;
  font-family: var(--mht-font-heading);
  font-size: clamp(2.6rem, 3.4vw + .3rem, 4.8rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--mht-color-text);
}
.mht-heading em {
  font-style: italic;
  font-weight: 400;
  color: var(--mht-color-brand-soft);
}

.mht-text {
  margin: 0;
  font-family: var(--mht-font-body);
  font-size: clamp(.9rem, .88rem + .22vw, 1.05rem);
  font-weight: 400;
  line-height: 1.78;
  color: var(--mht-color-text-soft);
}

.mht-card {
  position: relative;
  isolation: isolate;
}

/* Visual card styling is applied only when a card is not already controlled
   by a legacy section/card selector such as .glass-card. This lets Phase 5
   add mht-card as a product contract without repainting existing sections. */
.mht-card:not(.glass-card):not([data-mht-legacy="true"]) {
  border: 1px solid rgba(245, 243, 247, .09);
  border-radius: var(--mht-radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.014)),
    linear-gradient(135deg, rgba(197,166,211,0.07), rgba(142,99,163,0.035) 30%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(24,19,31,0.95), rgba(16,12,21,0.92));
  box-shadow: inset 0 1px 0 rgba(245, 243, 247, .045);
}

.mht-card--depth:not(.glass-card):not([data-mht-legacy="true"]) { box-shadow: var(--mht-shadow-glass); }

.mht-btn {
  --mht-btn-h: 48px;
}

.mht-btn:not(.mht-u-btn) {
  --mht-btn-h: 48px;
  position: relative;
  isolation: isolate;
  min-height: var(--mht-btn-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1px solid rgba(245,242,247,.32);
  border-radius: var(--mht-radius-pill);
  background: var(--mht-color-bg);
  color: var(--mht-color-text);
  font-family: var(--mht-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: border-color var(--mht-motion-slow) var(--mht-ease-out), color var(--mht-motion-slow) var(--mht-ease-out), background-color var(--mht-motion-slow) var(--mht-ease-out);
}
.mht-btn--primary:not(.mht-u-btn) { padding: 0 24px; }
.mht-btn--primary:not(.mht-u-btn):hover { border-color: var(--mht-color-accent-glow); color: var(--mht-color-accent-light); }
.mht-btn--secondary:not(.mht-u-btn) { padding: 0 26px; border-color: rgba(183,140,255,.45); color: var(--mht-color-text-soft); }
.mht-btn--secondary:not(.mht-u-btn):hover { border-color: var(--mht-color-accent-glow); color: var(--mht-color-bg); background: var(--mht-color-accent-glow); }
.mht-btn--ghost:not(.mht-u-btn) { padding: 0 24px; background: transparent; border-color: var(--mht-color-border); color: var(--mht-color-text-soft); }
.mht-btn:focus-visible { outline: 2px solid var(--mht-color-accent-glow); outline-offset: 4px; }

.mht-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.mht-reveal {
  opacity: var(--mht-reveal-opacity);
  transform: translateY(var(--mht-reveal-y)) scale(var(--mht-reveal-scale));
  transition: opacity var(--mht-motion-reveal) var(--mht-ease-out), transform var(--mht-motion-reveal) var(--mht-ease-out);
}
.mht-reveal.is-visible,
.mht-reveal.mht-reveal-done {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Bridge old foundation wrappers to the product role tokens without renaming. */
.mht-shell { width: var(--mht-site-width); max-width: var(--mht-site-max); }
.mht-section { padding-block: var(--mht-section-padding-y); }
.mht-content-heading { font-family: var(--mht-font-heading); color: var(--mht-color-text); }
.mht-content-body { font-family: var(--mht-font-body); color: var(--mht-color-text-soft); }
.mht-content-kicker { font-family: var(--mht-font-ui); color: var(--mht-color-text-muted); }

@media (max-width: 760px) {
  :root {
    --mht-site-gutter: 40px;
    --mht-section-head-gap: clamp(28px, 8vw, 42px);
  }
  .mht-actions { align-items: stretch; }
  .mht-actions .mht-btn { width: 100%; }
}


/* Phase 4: button helper compatibility utilities. */
.mht-u-btn--inline-gap { margin-right: 12px; }
.mht-u-btn--form-submit { flex: 0 0 auto; }


/* Phase 5: product component contracts for legacy sections.
   These selectors give QA, future patterns, and MH OS a stable component layer
   without forcing a visual redesign of current .mht-* sections. */
[data-mht-component="section-head"] {
  position: relative;
}
[data-mht-component="grid"] {
  position: relative;
}
[data-mht-component="card"] {
  position: relative;
}
[data-mht-role="proof"],
[data-mht-role="trust"],
[data-mht-role="action"],
[data-mht-role="clarity"] {
  scroll-margin-top: 96px;
}

/* Legacy button instances now also carry mht-btn for the product contract, but
   their established mht-u-btn visuals remain the source of truth during the
   controlled migration. */
.mht-u-btn.mht-btn {
  font-family: var(--mht-font-ui);
}


/* =====================================================
   Phase 8: Light / Dark / System appearance foundation
   ===================================================== */
html[data-mht-theme-effective="light"],
html[data-mht-theme="light"] {
  color-scheme: light;
  --mht-color-bg: var(--mht-color-bg-light);
  --mht-color-surface: var(--mht-color-surface-light);
  --mht-color-elevated: var(--mht-color-elevated-light);
  --mht-color-text: var(--mht-color-text-light);
  --mht-color-text-soft: var(--mht-color-text-soft-light);
  --mht-color-text-muted: var(--mht-color-text-muted-light);
  --mht-color-border: rgba(76, 52, 93, .18);
  --mht-color-border-soft: rgba(76, 52, 93, .12);
  --border-glass: rgba(76, 52, 93, .14);
  --text-faint: #7C7284;
}

html[data-mht-theme-effective="dark"],
html[data-mht-theme="dark"] {
  color-scheme: dark;
}

html[data-mht-theme-effective="light"],
html[data-mht-theme-effective="light"] body {
  background: var(--mht-color-bg);
}

html[data-mht-theme-effective="light"] body {
  color: var(--mht-color-text-muted);
  background:
    radial-gradient(ellipse 58% 42% at 72% 0%, rgba(230, 216, 255, .72), transparent 64%),
    linear-gradient(180deg, #F6F2F7 0%, #FDFBFF 46%, #F6F2F7 100%);
}

html[data-mht-theme-effective="light"] body::after {
  background-image:
    linear-gradient(rgba(76,52,93,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,52,93,.035) 1px, transparent 1px);
  opacity: .28;
}

html[data-mht-theme-effective="light"] .glass-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(246,242,247,.68)),
    linear-gradient(135deg, rgba(230,216,255,.72), rgba(197,166,211,.28) 34%, rgba(255,255,255,0) 68%);
  border-color: rgba(76, 52, 93, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 18px 48px rgba(76,52,93,.08);
}

html[data-mht-theme-effective="light"] .glass-card--elevated,
html[data-mht-theme-effective="light"] .glass-card--depth {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 10px 30px rgba(76,52,93,.08),
    0 24px 70px rgba(76,52,93,.10);
}

html[data-mht-theme-effective="light"] .mht-nav__inner {
  background:
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(246,242,247,.62)),
    rgba(246,242,247,.72);
  border-color: rgba(76,52,93,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 12px 36px rgba(76,52,93,.10),
    0 0 34px rgba(183,140,255,.10);
}

html[data-mht-theme-effective="light"] .mht-nav__toggle,
html[data-mht-theme-effective="light"] .mht-fs-menu__close {
  background: rgba(255,255,255,.72);
  border-color: rgba(76,52,93,.18);
}

html[data-mht-theme-effective="light"] .mht-fs-menu__backdrop {
  background: rgba(246,242,247,.86);
}

html[data-mht-theme-effective="light"] .mht-fs-menu__panel {
  background:
    radial-gradient(ellipse 70% 50% at 20% 90%, rgba(230,216,255,.78), transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 10%, rgba(197,166,211,.34), transparent 70%),
    linear-gradient(160deg, #FFFFFF 0%, #F6F2F7 48%, #EEE4F4 100%);
}

html[data-mht-theme-effective="light"] .mht-hero {
  background: transparent;
}

html[data-mht-theme-effective="light"] .mht-hero::before {
  background:
    radial-gradient(ellipse 58% 44% at 74% 6%, rgba(230,216,255,.72) 0%, transparent 60%),
    radial-gradient(ellipse 28% 20% at 82% 18%, rgba(183,140,255,.13) 0%, transparent 62%),
    radial-gradient(ellipse 22% 18% at 58% 72%, rgba(197,166,211,.18) 0%, transparent 68%);
}

.mht-appearance-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid var(--mht-color-border);
  border-radius: var(--mht-radius-pill);
  background: rgba(20,16,23,.58);
  color: var(--mht-color-text-soft);
  font-family: var(--mht-font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color var(--mht-motion-base) var(--mht-ease-out),
    border-color var(--mht-motion-base) var(--mht-ease-out),
    background-color var(--mht-motion-base) var(--mht-ease-out),
    transform var(--mht-motion-base) var(--mht-ease-out);
}

.mht-appearance-toggle:hover {
  color: var(--mht-color-text);
  border-color: rgba(183,140,255,.55);
  transform: translateY(-1px);
}

.mht-appearance-toggle:focus-visible {
  outline: 2px solid var(--mht-color-accent-glow);
  outline-offset: 4px;
}

.mht-appearance-toggle__icon {
  font-size: 13px;
  line-height: 1;
  color: var(--mht-color-accent-glow);
}

html[data-mht-theme-effective="light"] .mht-appearance-toggle {
  background: rgba(255,255,255,.72);
  border-color: rgba(76,52,93,.16);
  color: var(--mht-color-text-soft);
}

.mht-appearance-toggle--mobile {
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .mht-appearance-toggle--nav {
    display: none;
  }

  .mht-fs-menu__footer {
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mht-appearance-toggle {
    transition: none;
  }
  .mht-appearance-toggle:hover {
    transform: none;
  }
}