/* Theme contract: override these properties on document.documentElement. */
:root {
  color-scheme: light dark;
  --sm-ui-scale: 1;
  --sm-font-ui-scale: 1;
  --sm-font-body-scale: 1;
  --sm-font-code-scale: 1;
  --sm-font: Inter, ui-sans-serif, system-ui, sans-serif;
  --sm-font-code: ui-monospace, monospace;
  --sm-icon-filter: invert(88%) sepia(13%) saturate(210%) hue-rotate(168deg);
  --sm-layer-site-header: 600;
  --sm-site-header-height: var(--sm-size-56);
  --sm-nav-active-tab: light-dark(#24745f14, #9de7ce12);
  --sm-nav-inactive: light-dark(#e3eaf2, #101721);
  --sm-nav-brand-tint: light-dark(#00000012, #00000024);
  --sm-nav-brand-tint-mid: light-dark(#00000008, #00000012);
  --sm-nav-brand-tint-width: var(--sm-size-300);
  --sm-nav-brand-light: light-dark(#218860, #ffffff);
  --sm-nav-brand-glow-mask: linear-gradient(
    90deg,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
  --sm-nav-brand-glow:
    radial-gradient(
      ellipse 65% 16% at 50% 100%,
      rgb(128 255 192 / 0.5) 0%,
      rgb(128 255 192 / 0.24) 25%,
      rgb(128 255 192 / 0.08) 50%,
      rgb(128 255 192 / 0.015) 75%,
      rgb(128 255 192 / 0) 100%
    ),
    radial-gradient(
      ellipse 65% 100% at 50% 100%,
      rgb(86 180 132 / 0.36) 0%,
      rgb(86 180 132 / 0.2304) 20%,
      rgb(86 180 132 / 0.1296) 40%,
      rgb(86 180 132 / 0.0576) 60%,
      rgb(86 180 132 / 0.0144) 80%,
      rgb(86 180 132 / 0.0036) 90%,
      rgb(86 180 132 / 0) 100%
    );
  --sm-internal-link: light-dark(#246b4c, #b4f6d4);
  --sm-selection-ring: light-dark(#24745f22, #86dac322);
  --sm-checker-color: light-dark(#63738a14, #1d2a3838);
  --sm-ease-default: ease;
  --sm-checker-angle: 45deg;
  --sm-font-body-fluid: calc(4vw * var(--sm-font-body-scale));
  --sm-ease-branch: cubic-bezier(0.2, 0, 0, 1);
  --sm-caret-collapsed: -45deg;
  --sm-caret-expanded: 45deg;
  --sm-canvas: light-dark(#f5f7fa, #0e131c);
  --sm-text: light-dark(#202c3c, #e7ecf4);
  --sm-link: light-dark(#405875, #aabbd2);
  --sm-accent-text: light-dark(#17624e, #9de7ce);
  --sm-accent: light-dark(#24745f, #86dac3);
  --sm-header: light-dark(#edf1f6, #171f2a);
  --sm-border: light-dark(#d5dde7, #26303e);
  --sm-muted: light-dark(#63738a, #8292a8);
  --sm-secondary: light-dark(#45556b, #aab7c9);
  --sm-hover: light-dark(#e8edf3, #19232f);
  --sm-selected: light-dark(#dfefe9, #1b3534);
  --sm-selected-border: light-dark(#9cbfb2, #31564e);
  --sm-surface: light-dark(#ffffff, #151e2b);
  --sm-control-border: light-dark(#c6d1df, #303e4e);
  --sm-badge: light-dark(#e9eff6, #18222f);
  --sm-pressed: light-dark(#d6e0ed, #2b3a4b);
  --sm-bright: light-dark(#152334, #edf3fa);
  --sm-panel-border: light-dark(#d1dbe7, #293646);
  --sm-hover-border: light-dark(#6b7d94, #61758d);
  --sm-raised: light-dark(#edf2f8, #1a2737);
  --sm-active-surface: light-dark(#e1eee9, #1a2c32);
  --sm-inset: light-dark(#edf1f6, #111923);
  --sm-code-muted: light-dark(#526883, #8fa2bb);
  --sm-button-border: light-dark(#bdcada, #354456);
  --sm-button-text: light-dark(#293e56, #d1dfed);
  --sm-code-text: light-dark(#304f70, #bbd3e9);
  --sm-detail-text: light-dark(#40546d, #bdcadb);

  /* Reading typography */
  --sm-font-body-14: calc(14px * var(--sm-font-body-scale));
  --sm-font-body-16: calc(16px * var(--sm-font-body-scale));
  --sm-font-body-21: calc(21px * var(--sm-font-body-scale));
  --sm-font-body-26: calc(26px * var(--sm-font-body-scale));
  --sm-font-body-30: calc(30px * var(--sm-font-body-scale));
  --sm-font-body-42: calc(42px * var(--sm-font-body-scale));

  /* Code typography */
  --sm-font-code-10: calc(10px * var(--sm-font-code-scale));
  --sm-font-code-11: calc(11px * var(--sm-font-code-scale));
  --sm-font-code-12: calc(12px * var(--sm-font-code-scale));
  --sm-font-code-13: calc(13px * var(--sm-font-code-scale));

  /* Interface typography */
  --sm-font-ui-10: calc(10px * var(--sm-font-ui-scale));
  --sm-font-ui-11: calc(11px * var(--sm-font-ui-scale));
  --sm-font-ui-12: calc(12px * var(--sm-font-ui-scale));
  --sm-font-ui-13: calc(13px * var(--sm-font-ui-scale));
  --sm-font-ui-14: calc(14px * var(--sm-font-ui-scale));
  --sm-font-ui-15: calc(15px * var(--sm-font-ui-scale));
  --sm-font-ui-20: calc(20px * var(--sm-font-ui-scale));
  --sm-font-ui-23: calc(23px * var(--sm-font-ui-scale));
  --sm-font-ui-28: calc(28px * var(--sm-font-ui-scale));
  --sm-font-ui-9: calc(9px * var(--sm-font-ui-scale));
  --sm-font-ui-line-17: calc(17px * var(--sm-font-ui-scale));
  --sm-font-ui-line-18: calc(18px * var(--sm-font-ui-scale));
  --sm-font-ui-line-20: calc(20px * var(--sm-font-ui-scale));
  --sm-font-ui-line-40: calc(40px * var(--sm-font-ui-scale));

  /* UI dimensions */
  --sm-size-1: calc(1px * var(--sm-ui-scale));
  --sm-size-10: calc(10px * var(--sm-ui-scale));
  --sm-size-1040: calc(1040px * var(--sm-ui-scale));
  --sm-size-11: calc(11px * var(--sm-ui-scale));
  --sm-size-1120: calc(1120px * var(--sm-ui-scale));
  --sm-size-12: calc(12px * var(--sm-ui-scale));
  --sm-size-13: calc(13px * var(--sm-ui-scale));
  --sm-size-130: calc(130px * var(--sm-ui-scale));
  --sm-size-1320: calc(1320px * var(--sm-ui-scale));
  --sm-size-138: calc(138px * var(--sm-ui-scale));
  --sm-size-14: calc(14px * var(--sm-ui-scale));
  --sm-size-148: calc(148px * var(--sm-ui-scale));
  --sm-size-16: calc(16px * var(--sm-ui-scale));
  --sm-size-17: calc(17px * var(--sm-ui-scale));
  --sm-size-174: calc(174px * var(--sm-ui-scale));
  --sm-size-18: calc(18px * var(--sm-ui-scale));
  --sm-size-180: calc(180px * var(--sm-ui-scale));
  --sm-size-1_5: calc(1.5px * var(--sm-ui-scale));
  --sm-size-2: calc(2px * var(--sm-ui-scale));
  --sm-size-20: calc(20px * var(--sm-ui-scale));
  --sm-size-204: calc(204px * var(--sm-ui-scale));
  --sm-size-22: calc(22px * var(--sm-ui-scale));
  --sm-size-220: calc(220px * var(--sm-ui-scale));
  --sm-size-24: calc(24px * var(--sm-ui-scale));
  --sm-size-25: calc(25px * var(--sm-ui-scale));
  --sm-size-26: calc(26px * var(--sm-ui-scale));
  --sm-size-260: calc(260px * var(--sm-ui-scale));
  --sm-size-28: calc(28px * var(--sm-ui-scale));
  --sm-size-280: calc(280px * var(--sm-ui-scale));
  --sm-size-3: calc(3px * var(--sm-ui-scale));
  --sm-size-30: calc(30px * var(--sm-ui-scale));
  --sm-size-300: calc(300px * var(--sm-ui-scale));
  --sm-size-32: calc(32px * var(--sm-ui-scale));
  --sm-size-330: calc(330px * var(--sm-ui-scale));
  --sm-size-34: calc(34px * var(--sm-ui-scale));
  --sm-size-36: calc(36px * var(--sm-ui-scale));
  --sm-size-38: calc(38px * var(--sm-ui-scale));
  --sm-size-4: calc(4px * var(--sm-ui-scale));
  --sm-size-420: calc(420px * var(--sm-ui-scale));
  --sm-size-48: calc(48px * var(--sm-ui-scale));
  --sm-size-5: calc(5px * var(--sm-ui-scale));
  --sm-size-54: calc(54px * var(--sm-ui-scale));
  --sm-size-56: calc(56px * var(--sm-ui-scale));
  --sm-size-6: calc(6px * var(--sm-ui-scale));
  --sm-size-60: calc(60px * var(--sm-ui-scale));
  --sm-size-64: calc(64px * var(--sm-ui-scale));
  --sm-size-7: calc(7px * var(--sm-ui-scale));
  --sm-size-75: calc(75px * var(--sm-ui-scale));
  --sm-size-8: calc(8px * var(--sm-ui-scale));
  --sm-size-80: calc(80px * var(--sm-ui-scale));
  --sm-size-82: calc(82px * var(--sm-ui-scale));
  --sm-size-88: calc(88px * var(--sm-ui-scale));
  --sm-size-9: calc(9px * var(--sm-ui-scale));
  --sm-size-negative_280: calc(-280px * var(--sm-ui-scale));
  --sm-size-negative_6: calc(-6px * var(--sm-ui-scale));

  /* Type weights */
  --sm-weight-400: 400;
  --sm-weight-500: 500;
  --sm-weight-550: 550;
  --sm-weight-600: 600;
  --sm-weight-700: 700;
  --sm-weight-800: 800;

  /* Text leading */
  --sm-leading-1_35: 1.35;
  --sm-leading-1_5: 1.5;
  --sm-leading-1_6: 1.6;
  --sm-leading-1_7: 1.7;
  --sm-leading-1_8: 1.8;
  --sm-leading-1_85: 1.85;

  /* Letter spacing */
  --sm-tracking-_035: 0.035em;
  --sm-tracking-_04: 0.04em;
  --sm-tracking-_06: 0.06em;
  --sm-tracking-_1: 0.1em;
  --sm-tracking-_12: 0.12em;
  --sm-tracking-_13: 0.13em;
  --sm-tracking-_14: 0.14em;
  --sm-tracking-_16: 0.16em;
  --sm-tracking-negative__02: -0.02em;
  --sm-tracking-negative__035: -0.035em;

  /* Opacity */
  --sm-opacity-_8: 0.8;

  /* Motion duration */
  --sm-time-120: 120ms;
  --sm-time-140: 140ms;
  --sm-time-160: 160ms;
  --sm-time-180: 180ms;
  --sm-time-200: 200ms;
  --sm-time-220: 220ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}
:root[data-theme="light"] {
  color-scheme: light;
  --sm-icon-filter: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --sm-icon-filter: none;
  }
}