@font-face {
  font-family: "SM Sans";
  src: url("../fonts/manrope-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "SM Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --sm-font-sans: "SM Sans", "Segoe UI", sans-serif;
  --sm-font-mono: "SM Mono", Consolas, monospace;
  --sm-color-ink: #122a2b;
  --sm-color-ink-soft: #294241;
  --sm-color-muted: #657674;
  --sm-color-canvas: #f3f5f0;
  --sm-color-surface: #ffffff;
  --sm-color-surface-soft: #f7f9f5;
  --sm-color-surface-subtle: #f1f5f2;
  --sm-color-surface-raised: #ffffff;
  --sm-color-line: #d9e2dc;
  --sm-color-line-strong: #b8c9c1;
  --sm-color-border: var(--sm-color-line);
  --sm-color-brand: #087a70;
  --sm-color-brand-dark: #103d3a;
  --sm-color-brand-soft: #e4f3ee;
  --sm-color-accent: #d7ef4b;
  --sm-color-link: #225fc0;
  --sm-color-success: #15795c;
  --sm-color-warning: #a86513;
  --sm-color-danger: #bd3548;
  --sm-status-success-bg: #e8f7f0;
  --sm-status-success-text: #07573f;
  --sm-status-success-border: #72b69a;
  --sm-status-success-icon: #0d7656;
  --sm-status-warning-bg: #fff5d9;
  --sm-status-warning-text: #633600;
  --sm-status-warning-border: #d5a34d;
  --sm-status-warning-icon: #8a4c00;
  --sm-status-error-bg: #fff0f2;
  --sm-status-error-text: #842039;
  --sm-status-error-border: #d78695;
  --sm-status-error-icon: #aa2945;
  --sm-status-neutral-bg: #edf3f1;
  --sm-status-neutral-text: #294241;
  --sm-status-neutral-border: #aabdb6;
  --sm-status-neutral-icon: #45635f;
  --sm-space-1: 4px;
  --sm-space-2: 8px;
  --sm-space-3: 12px;
  --sm-space-4: 16px;
  --sm-space-5: 24px;
  --sm-space-6: 32px;
  --sm-space-7: 48px;
  --sm-space-8: 64px;
  --sm-space-page: clamp(16px, 3vw, 32px);
  --sm-radius-sm: 9px;
  --sm-radius-md: 15px;
  --sm-radius-lg: 23px;
  --sm-radius-pill: 999px;
  --sm-shadow-sm: 0 8px 24px rgba(16, 49, 46, 0.06);
  --sm-shadow-lg: 0 22px 58px rgba(16, 49, 46, 0.12);
  --sm-shadow-focus: 0 0 0 3px rgba(34, 95, 192, 0.28);
  --sm-focus-color: #225fc0;
  --sm-focus-ring: 3px solid var(--sm-focus-color);
  --sm-type-xs: 0.75rem;
  --sm-type-sm: 0.875rem;
  --sm-type-md: 1rem;
  --sm-type-lg: 1.25rem;
  --sm-type-xl: clamp(1.75rem, 4vw, 3rem);
  --sm-leading-tight: 1.2;
  --sm-leading-copy: 1.55;
  --sm-duration-fast: 160ms;
  --sm-duration-normal: 240ms;
  --sm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sm-control-height: 44px;
  --sm-touch-target: 44px;
  --sm-content-width: 1480px;
  --sm-content-reading: 760px;
  --sm-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sm-z-sticky: 80;
  --sm-z-overlay: 1000;
}

.sm2,
.sm3,
.sm2-admin-wrap,
body[class*="post-type-sm_"] #wpbody-content {
  font-family: var(--sm-font-sans);
  font-synthesis: none;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.sm2 code,
.sm2 time,
.sm3 code,
.sm3 time,
.sm2-admin-wrap code,
.sm2-admin-wrap time {
  font-family: var(--sm-font-mono);
}

:where(.sm2, .sm3, .sm2-admin-wrap) :where(button, input, select, textarea) {
  font-family: inherit;
}

:where(.sm2, .sm3, .sm2-admin-wrap) :where(button, [role="button"], summary, input, select, textarea):focus-visible,
:where(.sm2, .sm3, .sm2-admin-wrap) a:focus-visible {
  outline: var(--sm-focus-ring);
  outline-offset: 2px;
}

:where(.sm2, .sm3, .sm2-admin-wrap) :where([aria-busy="true"], .is-loading) {
  cursor: wait;
}

:where(.sm2, .sm3, .sm2-admin-wrap) :where([hidden]) {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sm2 *,
  .sm3 *,
  .sm2-admin-wrap * {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  :where(.sm2, .sm3, .sm2-admin-wrap) :where(button, .button, input, select, textarea, summary, [role="button"]) {
    border: 1px solid ButtonText;
  }

  :where(.sm2, .sm3, .sm2-admin-wrap) :where(.sm2-status, .sm3-status, .notice, [class*="status"]) {
    border: 1px solid CanvasText;
  }
}