/*
 * BEAMZ design system — shared foundations.
 *
 * This file and light-mode.css are the only editable theme inputs shared by
 * the React website and Zensical. Cross-runtime dimensions use px because the
 * two renderers intentionally use different root font sizes.
 */
:root {
  color-scheme: light dark;

  --beamz-font-body: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --beamz-font-heading: "Space Grotesk Variable", "Space Grotesk", "Inter",
    ui-sans-serif, system-ui, -apple-system, sans-serif;
  --beamz-font-code: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --beamz-radius-xs: 2px;
  --beamz-radius-sm: 4px;
  --beamz-radius-md: 6px;
  --beamz-radius-lg: 8px;

  --beamz-header-height: 56px;
  --beamz-shell-max: 1296px;
  --beamz-shell-gutter: 16px;
  --beamz-reading-max: 800px;
  --beamz-reading-padding: 28px;
  --beamz-rail-width: 224px;
  --beamz-rail-gap: 8px;
  --beamz-content-max-width: 768px;

  /* Compatibility aliases for existing platform adapters. */
  --beamz-site-max-width: var(--beamz-shell-max);
  --beamz-docs-max-width: var(--beamz-shell-max);

  --beamz-code-font-size: 12px;
  --beamz-code-line-height: 1.4;
  --beamz-code-padding-block: 12px;
  --beamz-code-padding-inline: 16px;
  --beamz-code-padding-leading: 20px;

  --beamz-motion-fast: 150ms;
  --beamz-motion-page: 220ms;

  --beamz-brand-950: #02060e;
  --beamz-brand-900: #03152a;
  --beamz-brand-850: #061a31;
  --beamz-brand-800: #0a2747;
  --beamz-brand-panel: rgb(2 6 14 / 85%);
  --beamz-brand-panel-strong: rgb(2 6 14 / 95%);
  --beamz-footer-background: #000;
  --beamz-footer-grain: url("/assets/textures/beamz-fine-grain.webp");
  --beamz-footer-grain-size: 256px 256px;
  --beamz-footer-grain-opacity: 0.22;
  --beamz-footer-grid-smoothing: blur(0.3px);
  --beamz-on-dark: #fff;
  --beamz-on-dark-muted: rgb(255 255 255 / 65%);
  --beamz-on-dark-subtle: rgb(255 255 255 / 20%);
  --beamz-on-dark-grid: rgb(255 255 255 / 22%);

  /* Zensical consumes these globally for search, dialogs, and navigation. */
  --md-text-font: "Inter";
  --md-code-font: "SFMono-Regular";
}

/* Shared landing-style footer for React and generated documentation. */
.footer-surface {
  background: linear-gradient(to top, #4666e5 0%, #07141e 76%, #000 100%);
  top: -2px;
}

.footer-grid-texture {
  position: absolute;
  inset: 32px -64px -64px;
  background-image: url("/assets/textures/beamz-warped-grid.svg");
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 20%) 28%, black 58%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgb(0 0 0 / 20%) 28%, black 58%);
}

.footer-grain-texture {
  position: absolute;
  inset: 0;
  background-image: var(--beamz-footer-grain);
  background-repeat: repeat;
  background-size: var(--beamz-footer-grain-size);
  mix-blend-mode: overlay;
  opacity: var(--beamz-footer-grain-opacity);
}

.footer-wordmark {
  font-size: clamp(128px, 25vw, 368px);
  opacity: 0.07;
  transform: translateY(20%);
}


.site-footer {
  position: relative;
  isolation: isolate;
  min-height: 480px;
  overflow: hidden;
  background: #020202;
  color: #fff;
  font-family: var(--beamz-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.site-footer .footer-surface {
  position: absolute;
  inset: -2px 0 0;
  overflow: hidden;
  pointer-events: none;
}
.site-footer .footer-grid-texture {
  filter: var(--beamz-footer-grid-smoothing);
}
.site-footer .footer-wordmark {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  pointer-events: none;
  user-select: none;
  text-align: center;
  font-family: var(--beamz-font-heading);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.075em;
  color: #fff;
}
.site-footer__content {
  box-sizing: border-box;
  position: relative;
  display: flex;
  min-height: 480px;
  align-items: flex-end;
  padding: 224px 0 36px;
  color: #fff;
}
.site-footer__inner {
  box-sizing: border-box;
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
  padding: 0 16px;
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 20px;
  font-size: 14px;
  line-height: 20px;
}
.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 40%);
  text-underline-offset: 4px;
  transition: color 150ms;
}
.site-footer a:hover { color: rgb(255 255 255 / 65%); }
.site-footer a:focus-visible { outline: 2px solid #a6b5ff; outline-offset: 4px; }
.site-footer__nav svg { width: 16px; height: 16px; }
.site-footer__credits {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  color: rgb(255 255 255 / 50%);
}
.site-footer__credits p { margin: 0; }
.site-footer__credits a:hover { color: #fff; }
@media (min-width: 640px) {
  .site-footer__content { padding-bottom: 40px; }
  .site-footer__credits { flex-direction: row; align-items: center; justify-content: space-between; }
}

.site-footer--notebook .footer-surface {
  background: linear-gradient(#ffffff, #dbe0ff 24%, #4666e5);
}