/* Magnatype design-system primitives. Page-specific composition stays in style.css. */
:root {
  --mt-bg: var(--wp--preset--color--background, #080808);
  --mt-surface: var(--wp--preset--color--surface, #1e1f1c);
  --mt-surface-raised: var(--wp--preset--color--surface-raised, #272923);
  --mt-border: var(--wp--preset--color--border, #3b3f34);
  --mt-accent: var(--wp--preset--color--accent, #aef172);
  --mt-accent-ink: var(--wp--preset--color--accent-ink, #17200f);
  --mt-text: var(--wp--preset--color--text, #f4f3ed);
  --mt-muted: var(--wp--preset--color--text-muted, #b8bdb0);
  --mt-text-subtle: var(--wp--preset--color--text-subtle, #8f9688);
  --mt-paper: var(--wp--preset--color--paper, #f2f0e9);
  --mt-paper-ink: var(--wp--preset--color--paper-ink, #22261e);
  --mt-paper-muted: var(--wp--preset--color--paper-muted, #62685c);
  --mt-paper-border: var(--wp--preset--color--paper-border, #c8c9bf);
  --mt-lavender: var(--wp--preset--color--lavender, #ddd8f2);
  --mt-purple: var(--wp--preset--color--purple, #6f3ac8);
  --mt-success-bg: var(--wp--preset--color--success-background, #20291b);
  --mt-success-text: var(--wp--preset--color--success-text, #aef172);
  --mt-control-border: #41453a;
  --mt-control-focus: #7aa956;
  --mt-field-hover: #282a24;
  --mt-field-focus: #292c25;
  --mt-accent-hover: #c1f69a;
  --mt-error-border: #a56363;
  --mt-error-bg: #3b2525;
  --mt-error-text: #ffd8d8;
  --mt-radius-xs: var(--wp--custom--radius--xs, 4px);
  --mt-radius-sm: var(--wp--custom--radius--sm, 8px);
  --mt-radius-md: var(--wp--custom--radius--md, 12px);
  --mt-radius-lg: var(--wp--custom--radius--lg, 16px);
  --mt-radius-xl: var(--wp--custom--radius--xl, 24px);
  --mt-radius-pill: var(--wp--custom--radius--pill, 999px);
  --mt-column-gap: var(--wp--custom--layout--column-gap, 28px);
  --mt-transition-fast: var(--wp--custom--transition--fast, 160ms);
  --mt-link: var(--mt-accent);
  --mt-focus: var(--mt-accent);
  --mt-selection-border: var(--mt-accent);
  --mt-specimen-tab-bg: #1e1f1c;
  --mt-ease-panel: cubic-bezier(.22, 1, .36, 1);
  --mt-transition-normal: var(--wp--custom--transition--normal, 240ms);
  --mt-gutter: var(--wp--custom--layout--page-gutter, 64px);
}

:where(button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--mt-focus);
  outline-offset: 3px;
}

.mt-container {
  width: min(100% - (2 * var(--mt-gutter)), var(--wp--style--global--wide-size, 1312px));
  margin-inline: auto;
}

.mt-stack { display: flex; flex-direction: column; gap: var(--mt-stack-gap, 16px); }
.mt-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mt-cluster-gap, 12px); }
.mt-grid { display: grid; grid-template-columns: repeat(var(--mt-grid-columns, 12), minmax(0, 1fr)); gap: var(--mt-column-gap); }

.mt-button,
.wp-block-button.is-style-mt-primary .wp-block-button__link,
.wp-block-button.is-style-mt-secondary .wp-block-button__link,
.wp-block-button.is-style-mt-ghost .wp-block-button__link {
  display: inline-flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--mt-radius-sm);
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  text-decoration: none;
  transition: color var(--mt-transition-fast) ease, background-color var(--mt-transition-fast) ease, border-color var(--mt-transition-fast) ease, transform var(--mt-transition-fast) ease;
}

.mt-button--primary,
.wp-block-button.is-style-mt-primary .wp-block-button__link { color: var(--mt-accent-ink); background: var(--mt-accent); }
.mt-button--secondary,
.wp-block-button.is-style-mt-secondary .wp-block-button__link { color: var(--mt-text); background: var(--mt-surface-raised); border-color: var(--mt-border); }
.mt-button--ghost,
.wp-block-button.is-style-mt-ghost .wp-block-button__link { padding-inline: 16px; color: var(--mt-link); background: transparent; font-weight: 500; }

.has-mt-leading-arrow .wp-block-button__link::before,
.mt-button.has-mt-leading-arrow::before {
  width: 17px;
  height: 17px;
  content: "";
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mt-field {
  display: grid;
  width: min(360px, 100%);
  min-height: 60px;
  gap: 5px;
  padding: 12px 14px;
  color: var(--mt-text);
  background: var(--mt-surface-raised);
  border: 1px solid transparent;
  border-radius: var(--mt-radius-sm);
}
.mt-field:focus-within { border-color: var(--mt-selection-border); outline: 2px solid color-mix(in srgb, var(--mt-focus) 30%, transparent); outline-offset: 2px; }
.mt-field__label { color: var(--mt-text-subtle); font-size: 10px; line-height: 13px; letter-spacing: .5px; }
.mt-field :is(input, select, textarea) { width: 100%; min-height: 18px; padding: 0; color: inherit; background: transparent; border: 0; font: inherit; font-size: 14px; line-height: 18px; outline: 0; }

.mt-badge { display: inline-flex; min-height: 29px; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--mt-radius-pill); font-size: 10px; font-weight: 600; line-height: 13px; letter-spacing: .8px; text-transform: uppercase; }
.mt-badge--success { color: var(--mt-success-text); background: var(--mt-success-bg); }
.mt-badge--success::before { width: 6px; height: 6px; flex: 0 0 6px; content: ""; background: currentColor; border-radius: 50%; }

.mt-progress-step { display: flex; width: 260px; max-width: 100%; min-height: 47px; align-items: center; gap: 10px; padding: 15px 18px; color: var(--mt-muted); background: var(--mt-ui-surface, #171815); border: 1px solid var(--mt-border); }
.mt-progress-step__number { color: var(--mt-text-subtle); font-family: var(--wp--preset--font-family--mono); font-size: 11px; }
.mt-progress-step__label { font-size: 13px; font-weight: 500; }
.mt-progress-step.is-active { color: var(--mt-accent-ink); background: var(--mt-accent); border-color: var(--mt-selection-border); }
.mt-progress-step.is-active .mt-progress-step__number { color: var(--mt-accent-ink); }

.mt-card,
.wp-block-group.is-style-mt-card-dark,
.wp-block-group.is-style-mt-card-paper { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--mt-radius-md); }
.mt-card--dark,
.wp-block-group.is-style-mt-card-dark { color: var(--mt-text); background: var(--mt-surface); border: 1px solid var(--mt-border); }
.mt-card--paper,
.wp-block-group.is-style-mt-card-paper { color: var(--mt-paper-ink); background: var(--mt-paper); }
.mt-card__title { margin: 0; font-family: var(--wp--preset--font-family--ui); font-size: 18px; font-weight: 600; line-height: 23px; }
.mt-card__body { margin: 0; color: var(--mt-muted); font-size: 13px; line-height: 1.5; }
.mt-card--paper .mt-card__body,
.wp-block-group.is-style-mt-card-paper .mt-card__body { color: var(--mt-paper-muted); }

.mt-feature-panel { padding: 40px; border-radius: var(--mt-radius-xl); }
.mt-section-shell { padding-block: clamp(48px, 4.45vw, 64px); padding-inline: var(--mt-gutter); }
.mt-content-shell { min-height: 60vh; padding-block: 64px; padding-inline: var(--mt-gutter); }
.mt-page-header { margin-bottom: 48px; }
.mt-page-title { max-width: 980px; margin: 0; font-size: clamp(48px, 6.5vw, 96px); letter-spacing: -.035em; }
.mt-entry-meta { margin-top: 16px; color: var(--mt-text-subtle); font-family: var(--wp--preset--font-family--mono); font-size: 11px; }
.mt-prose { color: var(--mt-text); font-size: 17px; line-height: 1.75; }
.mt-prose > * + * { margin-block-start: 1.5em; }
.mt-query-grid .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mt-column-gap); }
.mt-query-grid .wp-block-post { padding: 24px; background: var(--mt-surface); border-radius: var(--mt-radius-md); }
.mt-query-grid .wp-block-post-title { font-family: var(--wp--preset--font-family--ui); font-size: 24px; line-height: 1.15; }
.mt-query-grid .wp-block-post-title a { text-decoration: none; }
.mt-query-grid .wp-block-post-excerpt { color: var(--mt-muted); font-size: 14px; }

@media (hover: hover) and (pointer: fine) {
  .mt-button:hover,
  .wp-block-button:is(.is-style-mt-primary, .is-style-mt-secondary) .wp-block-button__link:hover { transform: translateY(-2px); }
}

@media (max-width: 700px) {
  :root { --mt-gutter: 20px; }
  .mt-grid { --mt-grid-columns: 1; }
  .mt-feature-panel { padding: 24px; }
  .mt-content-shell { padding-block: 48px; }
  .mt-query-grid .wp-block-post-template { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mt-button,
  .wp-block-button__link { transition-duration: .01ms !important; }
  .mt-button:hover,
  .wp-block-button:is(.is-style-mt-primary, .is-style-mt-secondary) .wp-block-button__link:hover { transform: none; }
}

@keyframes mt-panel-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mt-drawer-enter {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}