/* ============================================================================
   SHARED FOOTER — cross-site Tacet presentation for web-lab and web-neo.
   Layout behavior remains app-owned; this file owns the visual contract.
   ============================================================================ */

@layer components {
  :where(
    body:has(.site-footer),
    body:has(.footer-anchor),
    .page-shell--footer-tacet,
    .page-shell--footer-swage,
    .site-footer,
    .footer-anchor
  ) {
    --site-footer-bg: color-mix(
      in oklch,
      var(--beige-200),
      var(--beige-100) 18%
    );
    --site-footer-bg-soft: color-mix(
      in oklch,
      var(--beige-300),
      var(--beige-100) 44%
    );
    --site-footer-bg-lift: color-mix(
      in oklch,
      var(--beige-100),
      var(--footer-highlight) 18%
    );
    --site-footer-ink: var(--ink-mid);
    --site-footer-ink-muted: var(--ink-muted);
    --site-footer-ink-strong: var(--ink-deep);
    --site-footer-rule: color-mix(in oklch, var(--beige-700), transparent 78%);
    --site-footer-glow-core: color-mix(
      in oklch,
      var(--beige-100),
      var(--footer-highlight) 38%
    );
    --site-footer-glow-mid: color-mix(
      in oklch,
      var(--beige-400),
      var(--tacet-orange) 5%
    );
    --site-footer-glow-edge: color-mix(
      in oklch,
      var(--beige-500),
      transparent 84%
    );
    --site-footer-logo-filter: none;
    --site-footer-icon-filter: none;
    --site-footer-seam-surface: var(--site-footer-bg-soft);
    --site-footer-backdrop:
      radial-gradient(
        circle at 14% 84%,
        color-mix(in oklch, var(--beige-200), var(--tacet-orange) 4%) 0%,
        color-mix(in oklch, var(--beige-300), transparent 54%) 22%,
        transparent 48%
      ),
      radial-gradient(
        circle at 62% 12%,
        color-mix(in oklch, var(--beige-200), var(--pur) 2%) 0%,
        color-mix(in oklch, var(--beige-300), transparent 66%) 18%,
        transparent 36%
      ),
      radial-gradient(
        circle at 102% 52%,
        color-mix(in oklch, var(--beige-300), var(--tacet-orange) 2%) 0%,
        color-mix(in oklch, var(--beige-400), transparent 72%) 16%,
        transparent 34%
      );
  }

  html.dark
    :where(
      body:has(.site-footer),
      body:has(.footer-anchor),
      .page-shell--footer-tacet,
      .page-shell--footer-swage,
      .site-footer,
      .footer-anchor
    ) {
    --site-footer-bg: var(--beige-800);
    --site-footer-bg-soft: color-mix(
      in oklch,
      var(--beige-800),
      var(--beige-900) 36%
    );
    --site-footer-bg-lift: color-mix(
      in oklch,
      var(--beige-700),
      var(--beige-800) 48%
    );
    --site-footer-ink: var(--beige-300);
    --site-footer-ink-muted: color-mix(
      in oklch,
      var(--beige-300),
      transparent 24%
    );
    --site-footer-ink-strong: var(--beige-100);
    --site-footer-rule: color-mix(in oklch, var(--beige-300), transparent 72%);
    --site-footer-glow-core: color-mix(
      in oklch,
      var(--beige-100),
      var(--tacet-orange) 6%
    );
    --site-footer-glow-mid: color-mix(
      in oklch,
      var(--beige-400),
      var(--tacet-orange) 9%
    );
    --site-footer-glow-edge: color-mix(
      in oklch,
      var(--beige-500),
      transparent 76%
    );
    --site-footer-logo-filter: brightness(0) saturate(100%) invert(91%)
      sepia(10%) saturate(218%) hue-rotate(351deg) brightness(101%)
      contrast(90%);
    --site-footer-icon-filter: brightness(0) saturate(100%) invert(83%)
      sepia(7%) saturate(394%) hue-rotate(355deg) brightness(89%) contrast(88%);
    --site-footer-backdrop:
      radial-gradient(
        circle at 12% 86%,
        color-mix(in oklch, var(--beige-600), var(--tacet-orange) 6%) 0%,
        color-mix(in oklch, var(--beige-700), transparent 48%) 20%,
        transparent 48%
      ),
      radial-gradient(
        circle at 68% 8%,
        color-mix(in oklch, var(--beige-700), var(--pur) 2%) 0%,
        color-mix(in oklch, var(--beige-800), transparent 58%) 16%,
        transparent 34%
      ),
      radial-gradient(
        circle at 104% 58%,
        color-mix(in oklch, var(--beige-700), var(--tacet-orange) 4%) 0%,
        color-mix(in oklch, var(--beige-800), transparent 60%) 18%,
        transparent 36%
      );
  }

  body:has(.site-footer),
  body:has(.footer-anchor),
  :where(.page-shell--footer-tacet, .page-shell--footer-swage) {
    background-color: var(--site-footer-bg);
  }

  .site-footer {
    --site-footer-section-pad-x: clamp(1.5rem, 4vw, 3rem);
    --site-footer-section-max: 90rem;
    --site-footer-visible-rail: min(
      calc(100% - (2 * var(--site-footer-section-pad-x))),
      calc(
        var(--site-footer-section-max) - (2 * var(--site-footer-section-pad-x))
      )
    );

    position: relative;
    box-sizing: border-box;
    width: 100%;
    flex: none;
    isolation: isolate;
    overflow: visible;
    padding: clamp(1rem, 1.5vw, 1.5rem);
    border-top: 1px solid
      color-mix(in oklch, var(--site-footer-rule), transparent 18%);
    color: var(--site-footer-ink);
    background-color: var(--site-footer-bg);
    background-image: var(--site-footer-backdrop);
    box-shadow: var(--footer-rich-surface-shadow);
  }

  html.dark .site-footer {
    --site-footer-glow-core: color-mix(
      in oklch,
      var(--beige-200),
      transparent 42%
    );
    --site-footer-glow-mid: color-mix(
      in oklch,
      var(--beige-500),
      transparent 66%
    );
    --site-footer-glow-edge: color-mix(
      in oklch,
      var(--beige-600),
      transparent 88%
    );
    --site-footer-backdrop: radial-gradient(
      ellipse 58% 48% at 10% 100%,
      color-mix(in oklch, var(--beige-700), transparent 68%) 0%,
      color-mix(in oklch, var(--beige-800), transparent 82%) 38%,
      transparent 76%
    );

  }

  .footer-anchor {
    border-top: 1px solid
      color-mix(in oklch, var(--site-footer-rule), transparent 18%);
    color: var(--site-footer-ink);
    background-color: var(--site-footer-bg);
    background-image: var(--site-footer-backdrop);
    box-shadow: var(--footer-anchor-surface-shadow);
  }

  .footer-anchor__brand,
  .footer-anchor__copy {
    color: var(--site-footer-ink-strong);
  }

  .footer-anchor__nav,
  .footer-anchor__link {
    color: var(--site-footer-ink);
  }

  .footer-anchor__link:hover,
  .footer-anchor__link:focus-visible {
    color: var(--site-footer-ink-strong);
  }

  .page-shell--footer-tacet > #main-content,
  .page-shell--footer-swage > #main-content {
    box-shadow: var(--footer-main-seam-shadow);
  }

  html.dark .page-shell--footer-tacet > #main-content,
  html.dark .page-shell--footer-swage > #main-content {
    box-shadow: var(--footer-main-seam-shadow);
  }

  .site-footer__inner {
    position: relative;
    z-index: 1;
    width: var(--site-footer-visible-rail);
    max-width: calc(
      var(--site-footer-section-max) - (2 * var(--site-footer-section-pad-x))
    );
    margin-inline: auto;
    padding-block: clamp(1.55rem, 3vw, 2.5rem) clamp(1rem, 1.8vw, 1.5rem);
  }

  .site-footer__top {
    display: grid;
    grid-template-columns: minmax(16rem, 0.9fr) minmax(24rem, 1.1fr);
    gap: clamp(2rem, 5vw, 6rem);
    align-items: start;
  }

  .site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .site-footer__logo {
    display: inline-flex;
    width: min(9.6rem, 48vw);
    color: var(--site-footer-ink-strong);
  }

  .site-footer__logo img {
    width: 100%;
    height: auto;
    filter: var(--site-footer-logo-filter);
  }

  .site-footer__summary {
    max-width: 30rem;
    margin: 0;
    color: var(--site-footer-ink-muted);
    font-size: clamp(0.84rem, 0.8rem + 0.12vw, 0.92rem);
    line-height: 1.5;
  }

  .site-footer__social {
    display: flex;
    gap: 0.85rem;
    align-items: center;
  }

  .site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--site-footer-ink-muted);
    opacity: 0.78;
    transition:
      color var(--duration-fast) var(--ease-standard),
      opacity var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .site-footer__social a:hover,
  .site-footer__social a:focus-visible {
    color: var(--site-footer-ink-strong);
    opacity: 1;
    transform: translateY(-1px);
  }

  .site-footer__social img {
    width: 1.125rem;
    height: 1.125rem;
    filter: var(--site-footer-icon-filter);
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.25rem, 3vw, 3rem);
  }

  .site-footer__nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.62rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-footer__nav a {
    display: inline-flex;
    min-width: 1.5rem;
    min-height: 1.5rem;
    align-items: center;
    color: var(--site-footer-ink-muted);
    font-family: var(--font-body);
    font-size: clamp(0.82rem, 0.78rem + 0.12vw, 0.92rem);
    font-weight: 650;
    line-height: 1.3;
    text-decoration: none;
    transition:
      color var(--duration-fast) var(--ease-standard),
      transform var(--duration-fast) var(--ease-standard);
  }

  .site-footer__nav a:hover,
  .site-footer__nav a:focus-visible {
    color: var(--site-footer-ink-strong);
    transform: translateX(2px);
  }

  .site-footer__mark {
    --footer-mark-x: 42%;
    --footer-mark-y: 52%;

    position: relative;
    width: 100%;
    aspect-ratio: 768 / 204;
    height: auto;
    margin-block: clamp(1.55rem, 3vw, 2.45rem) clamp(0.85rem, 2vw, 1.4rem);
    overflow: hidden;
    pointer-events: none;
    user-select: none;
  }

  .site-footer__mark-outline,
  .site-footer__mark-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .site-footer__mark-outline {
    background: color-mix(in oklch, var(--site-footer-ink), transparent 52%);
    opacity: 0.76;
    mask: url("../images/footer/erp-ai-wordmark-outline.svg") left center / 100%
      auto no-repeat;
    -webkit-mask: url("../images/footer/erp-ai-wordmark-outline.svg") left
      center / 100% auto no-repeat;
  }

  .site-footer__mark-mask {
    opacity: 1;
    mask: url("../images/erp-ai-wordmark.svg") left center / 100% auto no-repeat;
    -webkit-mask: url("../images/erp-ai-wordmark.svg") left center / 100% auto
      no-repeat;
  }

  .site-footer__mark-searchlight {
    position: absolute;
    width: 20rem;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    background: radial-gradient(
      circle,
      var(--site-footer-glow-core) 0%,
      var(--site-footer-glow-mid) 36%,
      var(--site-footer-glow-edge) 68%,
      transparent 100%
    );
    opacity: 0.9;
    transform: translate(
      calc(var(--footer-mark-x, -100%) - 50%),
      calc(var(--footer-mark-y, -100%) - 50%)
    );
    transition: opacity 1000ms cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  html.dark .site-footer__mark-searchlight {
    opacity: 0.5;
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    color: var(--site-footer-ink-muted);
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.4;
  }

  .site-footer__utilities {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: flex-end;
  }

  .site-footer__theme-toggle,
  .footer-theme-switch {
    position: relative;
    display: inline-flex;
    gap: 0;
    align-items: center;
    width: 4.625rem;
    height: 2.125rem;
    padding: 0.1875rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    background: var(--background);
    box-shadow: var(--footer-toggle-track-shadow);
    isolation: isolate;
  }

  .site-footer__theme-thumb,
  .footer-theme-switch__thumb {
    position: absolute;
    z-index: 0;
    inset-block: 0.1875rem;
    left: 0.1875rem;
    width: calc(50% - 0.1875rem);
    border: 1px solid var(--foreground);
    border-radius: var(--radius-full);
    background: var(--foreground);
    box-shadow: var(--footer-toggle-thumb-shadow);
    transform: translateX(0);
    transition:
      transform var(--duration-normal) var(--ease-decelerate),
      background var(--duration-fast) var(--ease-standard),
      border-color var(--duration-fast) var(--ease-standard);
    pointer-events: none;
  }

  .site-footer__theme-toggle:has(
      .theme-btn[data-theme="dark"][data-active="true"]
    )
    .site-footer__theme-thumb,
  .footer-theme-switch:has(.theme-btn[data-theme="dark"][data-active="true"])
    .footer-theme-switch__thumb {
    transform: translateX(100%);
  }

  .site-footer__theme-toggle .theme-btn,
  .footer-theme-switch .theme-btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 50%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
  }

  .site-footer__theme-toggle .theme-btn[data-active="true"],
  .footer-theme-switch .theme-btn[data-active="true"] {
    color: var(--background);
  }

  .site-footer__theme-toggle .theme-btn:focus-visible,
  .footer-theme-switch .theme-btn:focus-visible {
    outline: 2px solid var(--site-footer-accent, var(--tacet-orange));
    outline-offset: 0.125rem;
  }

  .site-footer__theme-icon,
  .site-footer__theme-icon svg,
  .footer-theme-switch__icon,
  .footer-theme-switch__icon svg {
    display: inline-flex;
    width: 0.9375rem;
    height: 0.9375rem;
  }

  .footer-theme-switch__icon svg {
    stroke-width: 2.15;
  }

  .site-footer__status {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--site-footer-rule);
    border-radius: var(--radius-full);
    color: var(--site-footer-ink-strong);
    background: color-mix(
      in oklch,
      var(--site-footer-bg-lift),
      transparent 46%
    );
    font-size: 0.82rem;
    font-weight: 650;
    text-decoration: none;
  }

  /* Profile palettes intentionally remain separate. Keep these mappings
     after the generic footer rules so shared dark-mode defaults cannot
     collapse Tacet and Swage back to one presentation. */
  :where(body:has(.site-footer--tacet), .page-shell--footer-tacet, .site-footer--tacet) {
    --site-footer-accent: var(--tacet-orange);
    --site-footer-bg: var(--footer-tacet-bg-light);
    --site-footer-bg-soft: var(--footer-tacet-bg-soft-light);
    --site-footer-bg-lift: var(--footer-tacet-bg-lift-light);
    --site-footer-ink: var(--footer-tacet-ink-light);
    --site-footer-ink-strong: var(--footer-tacet-ink-strong-light);
    --site-footer-ink-muted: var(--footer-tacet-ink-muted-light);
    --site-footer-rule: var(--footer-tacet-rule-light);
    --site-footer-logo-filter: none;
    --site-footer-icon-filter: none;
    --site-footer-seam-surface: var(--footer-tacet-bg-soft-light);
    --site-footer-backdrop: linear-gradient(
      135deg,
      var(--footer-tacet-bg-lift-light) 0%,
      var(--footer-tacet-bg-soft-light) 42%,
      var(--footer-tacet-bg-light) 100%
    );
  }

  html.dark
    :where(body:has(.site-footer--tacet), .page-shell--footer-tacet, .site-footer--tacet),
  html.dark .site-footer.site-footer--tacet {
    --site-footer-bg: var(--footer-tacet-bg-dark);
    --site-footer-bg-soft: var(--footer-tacet-bg-soft-dark);
    --site-footer-bg-lift: var(--footer-tacet-bg-lift-dark);
    --site-footer-ink: var(--footer-tacet-ink-dark);
    --site-footer-ink-strong: var(--footer-tacet-ink-strong-dark);
    --site-footer-ink-muted: var(--footer-tacet-ink-muted-dark);
    --site-footer-rule: var(--footer-tacet-rule-dark);
    --site-footer-logo-filter: brightness(0) saturate(100%) invert(91%) sepia(10%) saturate(218%)
      hue-rotate(351deg) brightness(101%) contrast(90%);
    --site-footer-icon-filter: brightness(0) saturate(100%) invert(83%) sepia(7%) saturate(394%)
      hue-rotate(355deg) brightness(89%) contrast(88%);
    --site-footer-seam-surface: var(--footer-tacet-bg-soft-dark);
    --site-footer-backdrop: var(--footer-tacet-backdrop-dark);
  }

  :where(body:has(.site-footer--swage), .page-shell--footer-swage, .site-footer--swage) {
    --site-footer-accent: var(--swage-accent, var(--tacet-orange));
    --site-footer-bg: var(--footer-swage-bg-light);
    --site-footer-bg-soft: var(--footer-swage-bg-soft-light);
    --site-footer-bg-lift: var(--footer-swage-bg-lift-light);
    --site-footer-ink: var(--footer-swage-ink-light);
    --site-footer-ink-strong: var(--footer-swage-ink-strong-light);
    --site-footer-ink-muted: var(--footer-swage-ink-muted-light);
    --site-footer-rule: var(--footer-swage-rule-light);
    --site-footer-logo-filter: none;
    --site-footer-icon-filter: none;
    --site-footer-seam-surface: var(--footer-swage-bg-soft-light);
    --site-footer-backdrop: linear-gradient(
      135deg,
      var(--footer-swage-bg-lift-light) 0%,
      var(--footer-swage-bg-soft-light) 42%,
      var(--footer-swage-bg-light) 100%
    );
  }

  html:is(.dark, [data-catalog-theme='dark'])
    :where(body:has(.site-footer--swage), .page-shell--footer-swage, .site-footer--swage),
  html:is(.dark, [data-catalog-theme='dark']) .site-footer.site-footer--swage {
    --site-footer-bg: var(--footer-swage-bg-dark);
    --site-footer-bg-soft: var(--footer-swage-bg-soft-dark);
    --site-footer-bg-lift: var(--footer-swage-bg-lift-dark);
    --site-footer-ink: var(--footer-swage-ink-dark);
    --site-footer-ink-strong: var(--footer-swage-ink-strong-dark);
    --site-footer-ink-muted: var(--footer-swage-ink-muted-dark);
    --site-footer-rule: var(--footer-swage-rule-dark);
    --site-footer-logo-filter: none;
    --site-footer-icon-filter: none;
    --site-footer-seam-surface: var(--footer-swage-bg-soft-dark);
    --site-footer-backdrop: linear-gradient(
      135deg,
      var(--footer-swage-bg-lift-dark) 0%,
      var(--footer-swage-bg-soft-dark) 42%,
      var(--footer-swage-bg-dark) 100%
    );
  }

  @media (pointer: coarse) {
    .site-footer__social a {
      width: 2.75rem;
      height: 2.75rem;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .site-footer__mark-searchlight,
    .footer-theme-switch__thumb {
      transition: none;
    }
  }

  @media (max-width: 56rem) {
    .site-footer__top {
      grid-template-columns: 1fr;
      gap: 2.25rem;
    }

    .site-footer__nav {
      grid-template-columns: repeat(3, minmax(8rem, 1fr));
      overflow-x: auto;
      padding-bottom: 0.25rem;
    }
  }

  @media (max-width: 42rem) {
    .site-footer {
      padding: 0.75rem;
    }

    .site-footer__inner {
      width: min(calc(100% - 1.5rem), var(--site-footer-section-max));
    }

    .site-footer__nav {
      grid-template-columns: 1fr;
      gap: 1.75rem;
    }

    .site-footer__bottom {
      align-items: flex-start;
      flex-direction: column;
    }

    .site-footer__utilities {
      justify-content: flex-start;
    }
  }
}